React component tied to scroll events with callbacks for enter, exit and progress while scrolling through the viewport.
npm install react-scroll-trigger
!CircleCI
!Snyk Vulnerabilities for GitHub Repo
React component that monitors scroll events to trigger callbacks when it enters,
exits and progresses through the viewport. All callback include the progress andvelocity of the scrolling, in the event you want to manipulate stuff based on
those values.
Via npm
``sh`
npm install react-scroll-trigger
Via Yarn
`sh`
yarn add react-scroll-trigger
`js
import ScrollTrigger from 'react-scroll-trigger';
...
onEnterViewport() {
this.setState({
visible: true,
});
}
onExitViewport() {
this.setState({
visible: false,
});
}
render() {
const {
visible,
} = this.state;
return ( The Or, pass in children to receive events and The beauty of this component is its flexibility. I’ve used it to trigger Below are the properties that can be defined on a * MIT © Ryan Hefner
container ${visible ? 'container-animate' : ''}} />`
);
} is intended to be used as a composable element, allowing you`
to either use it standalone within a page (ie. no children).js`
based on the dimensions of`
those elements within the DOM.js`
[...list items...]
AJAX requests based on either the or progress of the component withinprogress
the viewport. Or, as a way to control animations or other transitions that you
would like to either trigger when visible in the viewport or based on the exact of that element as it transitions through the viewport.$3
instance.className
In addition to these properties, all other standard React properites like ,key, etc. can be passed in as well and will be applied to the that willScrollTrigger
be rendered by the .component:Element | String - React component or HTMLElement to render as the wrapper for the ScrollTrigger (Default: div)containerRef:Object | String
* - DOM element instance or string to use for query selecting DOM element. (Default: document.documentElement)throttleResize:Number
* - Delay to throttle resize calls in milliseconds (Default: 100)throttleScroll:Number
* - Delay to throttle scroll calls in milliseconds (Default: 100)triggerOnLoad:Boolean
* - Whether or not to trigger the onEnter callback on mount (Default: true)onEnter:Function
* - Called when the component enters the viewport ({progress, velocity}, ref) => {}
* - Called when the component exits the viewport ({progress, velocity}, ref) => {}
* - Called while the component progresses through the viewport ({progress, velocity}, ref) => {}`License