🚧 This package is in-progress, API may be changed frequently. I don't recommend you to use it now. If you're willing to be an early user. Please note any changes via release. Here's the milestone.

React Cool Inview

A React hook that monitors an element enters or leaves the viewport (or another element) with performant and efficient way, using Intersection Observer. It's lightweight and super flexible, which can help you do many things, like lazy-loading images, scrolling to load content, triggering animations, tracking advertisement impressions etc. Try it you will 👍🏻 it!

Milestone

• Detect an element is in-view or not
• onEnter, onLeave, onChange events
• Trigger once feature
• Support server-side rendering
• Support Intersection Observer v2
• Unit testing
• Demo app
• Demo code
• Typescript type definition
• Documentation

Features

Coming soon...

Requirement

To use react-cool-inview, you must use react@16.8.0 or greater which includes hooks.

Installation

This package is distributed via npm.

$ yarn add react-cool-inview
# or
$ npm install --save react-cool-inview

Usage

react-cool-inview has a flexible API design, it can cover simple to complex use cases for you. Here are some ideas for how you can use it.

⚠️ Most modern browsers support Intersection Observer natively. You can also add polyfill for full browser support.

Basic Use Case

To monitor an element enters or leaves the browser viewport by the inView state and useful sugar events.

import React, { useRef } from 'react';
import useInView from 'react-cool-inview';

const App = () => {
  const ref = useRef();
  const { inView, entry } = useInView(ref, {
    threshold: 0.25, // Default is 0
    onEnter: ({ entry, unobserve }) => {
      // Triggered when the target enters the browser viewport (start intersecting)
    },
    onLeave: ({ entry, unobserve }) => {
      // Triggered when the target leaves the browser viewport (end intersecting)
    },
  });

  return <div ref={ref}>{inView ? 'Hello, I am 🤗' : 'Bye, I am 😴'}</div>;
};

Lazy-loading Images

Coming soon...

API

Coming soon...

Intersection Observer Polyfill

Intersection Observer has good support amongst browsers, but it's not universal. You'll need to polyfill browsers that don't support it. Polyfills is something you should do consciously at the application level. Therefore react-cool-inview doesn't include it.

You can use W3C's polyfill:

$ yarn add intersection-observer
# or
$ npm install --save intersection-observer

Then import it at your app's entry point:

import 'intersection-observer';

Or load the polyfill only if needed:

if (!window.IntersectionObserver) require('intersection-observer');

Polyfill.io is an alternative way to add the polyfill when needed.