React View Tracker
Simple react component that watch element when enters or leaves the browser viewport.
Demo
Installation
Add react-view-tracker
dependency
yarn add react-view-trackernpm install react-view-tracker --save
Usage
<ViewTracker onShow= {console})> <Content /></ViewTracker>
Options
Name | Type | Default | Required | Description |
---|---|---|---|---|
onShow | Function | null | false | When element visible in the view port this function will be called with entry. |
onHide | Function | null | false | When element visible then not visible in the view port this function will be called with entry |
onStartObserving | Function | null | false | When component did load it will start observing and call this function with container element |
onStopObserving | Function | null | false | When component un mount it will stop observing and call this function with container element |
setRootContainer | Function | null | false | The Function should return Element that is used as the viewport for checking visibility of the target. |
once | boolean | false | false | Only trigger this method once |
visiblePercentage | number | number[] | 1 | false | Number between 0 and 1 indicating the percentage that should be visible before triggering. Can also be an array of numbers, to create multiple trigger points. |
offset | object | {left: 0, right: 0, top: 0, bottom: 0} | false | Margin around the root. |
License
This project is licensed under the MIT License - see the LICENCE.md file for details