react-viewable v1.0.5
react viewable
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
Props
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']),
once bool
optional
default false
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
reactionTime number
optional
default 500
How often the wrapper checks to see whether it's in the viewport in ms
buffer number
optional
default 100
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
delay number
optional
default 500
The time in milliseconds before which the transition starts once the component is in the viewport
fade bool
optional
default true
Whether the component fades into view with a transition
fadeDir string
optional
default left
The direction the component fades in from, can be top
, bottom
, left
or right
onViewEnter func
optional
A function that is called every time the component transitions from out of view to into view. Is passed the html element
onViewLeave func
optional
A function that is called every time the component transitions from into view to out of view. Is passed the html element
children node
optional
The content to render
Usage
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;
Development
- clone repo &&
npm install
- Development server
npm start
. - Build
npm run build
;