React component wrapper for scrollMonitor

Downloads in past


1100.1.06 years ago8 years agoMinified + gzip package size for react-scrollmonitor in KB


Build Status npm semantic-release Commitizen friendly
React component wrapper for scrollMonitor
Requires React 0.13.0 or greater


import ScrollMonitor from 'react-scrollmonitor';

  enterViewport={() => console.log('Hi!')}
  exitViewport={() => console.log('Bye!')}>
  <ComponentYouWantToTrack />

Note: You can only wrap a single child element with react-scrollmonitor. Multiple components being wrapped will result in errors.


react-scrollmonitor supports the following events, for details on each event see the scrollMonitor github page.
  • visibilityChange
  • stateChange
  • enterViewport
  • fullyEnterViewport
  • exitViewport
  • partiallyExitViewport

Server Rendering

scrollMonitor will only work inside a browser due to it's dependency on the window object. react-scrollmonitor utilizes the scrollMonitor api inside of the componentDidMount lifecycle stage which will only run on the client. However to stop the scrollMonitor module being imported on the server and causing errors the browser option is used in package.json to tell your build tool not to include the dependency on the server. Webpack and Browserify both support this option.
TL;DR Server rendering works