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;