react-scrollmonitor

React component wrapper for scrollMonitor

Downloads in past

Stats

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

Readme

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

Usage

import ScrollMonitor from 'react-scrollmonitor';

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

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

Events

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