react-scrollmonitor
React component wrapper for scrollMonitor
Requires React 0.13.0 or greater
Usage
; <ScrollMonitor enterViewport= console exitViewport= console> <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