react-inview

React Component that triggers an event when inview

Stats

StarsIssuesVersionUpdatedCreatedSize
react-inview
1220.0.84 years ago7 years agoMinified + gzip package size for react-inview in KB

Readme

Why react-inview?

Use the React Inview component to figure out when a DOM element is in user's view. It will call a Function passed to the onInview property. As it turns out, it's specific for DOM (shouldn't work for react-native). It requires two dependencies, jquery and jquery-inview plugin.

Demo

The React Inview component can be used for creating an infinite scroll layout.

infinite scroll

See the example for more details.

Usage

Install it using npm.

npm install --save react-inview

Simple usage example.

<Inview onInview={this.handleInview}>
  <span>I'm in your view</span>
</Inview>

Properties (props)

onInview A Function that is triggered when the children element is in view.

License

MIT © Rafael Xavier de Souza

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.