react-scroll-trigger
v0.6.14
Published
React component tied to scroll events with callbacks for enter, exit and progress while scrolling through the viewport.
Downloads
10,988
Maintainers
Readme
📜 react-scroll-trigger
React component that monitors scroll
events to trigger callbacks when it enters,
exits and progresses through the viewport. All callback include the progress
and
velocity
of the scrolling, in the event you want to manipulate stuff based on
those values.
Install
Via npm
npm install react-scroll-trigger
Via Yarn
yarn add react-scroll-trigger
How to use
import ScrollTrigger from 'react-scroll-trigger';
...
onEnterViewport() {
this.setState({
visible: true,
});
}
onExitViewport() {
this.setState({
visible: false,
});
}
render() {
const {
visible,
} = this.state;
return (
<ScrollTrigger onEnter={this.onEnterViewport} onExit={this.onExitViewport}>
<div className={`container ${visible ? 'container-animate' : ''}`} />
</ScrollTrigger>
);
}
The ScrollTrigger
is intended to be used as a composable element, allowing you
to either use it standalone within a page (ie. no children).
<ScrollTrigger onEnter={this.onEnterViewport} onExit={this.onExitViewport} />
Or, pass in children to receive events and progress
based on the dimensions of
those elements within the DOM.
<ScrollTrigger onEnter={this.onEnterViewport} onExit={this.onExitViewport}>
<List>
[...list items...]
</List>
</ScrollTrigger>
The beauty of this component is its flexibility. I’ve used it to trigger
AJAX requests based on either the onEnter
or progress
of the component within
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
progress
of that element as it transitions through the viewport.
Properties
Below are the properties that can be defined on a <ScrollTrigger />
instance.
In addition to these properties, all other standard React properites like className
,
key
, etc. can be passed in as well and will be applied to the <div>
that will
be rendered by the ScrollTrigger
.
component:Element | String
- React component or HTMLElement to render as the wrapper for theScrollTrigger
(Default:div
)containerRef:Object | String
- DOM element instance or string to use for query selecting DOM element. (Default:document.documentElement
)throttleResize:Number
- Delay to throttleresize
calls in milliseconds (Default:100
)throttleScroll:Number
- Delay to throttlescroll
calls in milliseconds (Default:100
)triggerOnLoad:Boolean
- Whether or not to trigger theonEnter
callback on mount (Default:true
)onEnter:Function
- Called when the component enters the viewport({progress, velocity}, ref) => {}
onExit:Function
- Called when the component exits the viewport({progress, velocity}, ref) => {}
onProgress:Function
- Called while the component progresses through the viewport({progress, velocity}, ref) => {}