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>
))