react-in-viewport

React In Viewport Component

Wrapper component to detect if the component is in viewport. Use Intersection Observer API

Dependencies: Intersection Observer Polyfills

Usages

Wrap your component with handleViewport HOC, you will receive inViewport props indicating the component is in viewport or not.

handleViewport HOC accepts three params

• Component
• Options: second param is the option you want to pass to Intersection Observer API.
• Config object:

• disconnectOnLeave { Boolean } disconnect intersection observer after leave

The HOC preserve onEnterViewport and onLeaveViewport props as a callback

NOTE: Stateless: Need to add ref={this.props.innerRef} on your component

import handleViewport from 'react-in-viewport';

const Block = (props: { inViewport: boolean }) => {
  const { inViewport, innerRef } = props;
  const color = inViewport ? '#217ac0' : '#ff9800';
  const text = inViewport ? 'In viewport' : 'Not in viewport';
  return (
    <div className="viewport-block" ref={innerRef}>
      <h3>{ text }</h3>
      <div style={{ width: '400px', height: '300px', background: color }} />
    </div>
  );
};

const ViewportBlock = handleViewport(Block, /** options: {}, config: {} **/);

const Component = (props) => (
  <div>
    <div style={{ height: '100vh' }}>
      <h2>Scroll down to make component in viewport</h2>
    </div>
    <ViewportBlock onEnterViewport={() => console.log('enter')} onLeaveViewport={() => console.log('leave')} />
  </div>
))