react-observer-component

React intersection Observer

React custom hook that uses the Intersection observer API.

Codesandbox demo

Getting started

npm install react-observer-component

Usage

import React from 'react';
import useObserver from 'react-observer-component';

const MyComponent = () => {
    const [isInView, ref] = useObserver();

    return (
        <div ref={ref}>
            {isInView && <p>Only shows when is in viewport!</p>}
        </div>
    );
};

Browser support

Author: Mikel Parra [e-mail] | http://github.com/mikelpmc