A react wrapper component that renders it's children only once the component is in view. Takes several optional props for timing customization.
See it in action here
once : PropTypes.bool,
reactionTime : PropTypes.number,
buffer : PropTypes.number,
delay : PropTypes.number,
children : PropTypes.node,
onViewEnter : PropTypes.func,
onViewLeave : PropTypes.func,
// animation/style props
fade : PropTypes.bool,
fadeDir : PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
Whether the children only come into view once - if false, the children will animate out as soon as they are off screen, and then re-animate in next time they are on screen
How often the wrapper checks to see whether it's in the viewport in ms
The amount of pixels the wrapper allows to be in view, a larger number will start the transition before the element is in the viewport
The time in milliseconds before which the transition starts once the component is in the viewport
Whether the component fades into view with a transition
The direction the component fades in from, can be top
, bottom
, left
or right
A function that is called every time the component transitions from out of view to into view. Is passed the html element
A function that is called every time the component transitions from into view to out of view. Is passed the html element
The content to render
npm install react-viewable
Here is an example integration:
import Viewable from 'react-viewable';
const MyApp = () => {
return (
<Viewable
once={true}
reactionTime={500}
buffer={100}
delay={500}
onViewEnter={el => console.log(el)}
onViewLeave={el => console.log(el)}
fade={true}
fadeDir="left"
>
<MyComponent />
</Viewable>
)
}
export default MyApp;
- clone repo &&
npm install
- Development server
npm start
. - Build
npm run build
;