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

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

import handleViewport from 'react-in-viewport';

const Block = (props) => {
  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);

const Component = (props) => (
  <div>
    <div style={{ height: '100vh' }}>
      <h2>Scroll down to make component in viewport</h2>
    </div>
    <ViewportBlock />
  </div>
))