0.1.1 • Published 4 years ago
react-view-tracker v0.1.1
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-tracker
npm install react-view-tracker --save
Usage
import ViewTracker from 'react-view-tracker'
<ViewTracker
onShow={(entry)=> {console.log(entry)})}
>
<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