Check If A React Component In The Viewport – react-on-screen

Category: Animation , React | May 12, 2017
Author: fkhadra
Views Total: 806
Official Page: Go to website
Last Update: May 12, 2017
License: MIT

Provide a component to wrap your react component and check if there are visible on the screen. You can use this component to trigger an entrance animation for instance!

Features:

  • Don’t rely on findDOMNode. So it can be used with a stateless component.
  • Transfer all the props to the wrapped component
  • Visibility can be tracked only once
  • Event listeners are implemented with throttle to avoid memory leaks or performance issues

Installation:

# Yarn
yarn add react-on-screen

# NPM
$ npm install react-on-screen

Preview:

react-on-screen