Cool Element Enter & Leave Monitor In React - COOL INVIEW

Description:

COOL INVIEW is a React hook library that uses Intersection Observer to monitor an element enters or leaves the viewport (or another element) in a highly-performant way.

It’s lightweight and super flexible, which can cover all the cases that you need, like lazy-loading images and videos, infinite scrolling web app, triggering animations, tracking impressions, and more.

Install & Import:

# Yarn
$ yarn add react-cool-inview
# NPM
$ npm i react-cool-inview --save

import React from "react";
import useInView from "react-cool-inview";

Basic Usage:

const App = () => {
  const { ref, inView, scrollDirection, entry, observe, unobserve } = useInView(
    {
      threshold: 0.5, // Default is 0
      onChange: ({ inView, scrollDirection, entry, observe, unobserve }) => {
        // Triggered whenever the target meets a threshold, e.g. [0.25, 0.5, ...]
      },
      onEnter: ({ scrollDirection, entry, observe, unobserve }) => {
        // Triggered when the target enters the viewport
      },
      onLeave: ({ scrollDirection, entry, observe, unobserve }) => {
        // Triggered when the target leaves the viewport
      },
      // More useful options...
    }
  );
  return <div ref={ref}>{inView ? "Hello, I am here" : "Bye"}</div>;
};

Available options:

ref?: RefObject<T>;
root?: HTMLElement;
rootMargin?: string;
threshold?: number | number[];
trackVisibility?: boolean;
delay?: number;
unobserveOnEnter?: boolean;
onChange?: Callback<ChangeEvent>;
onEnter?: Callback;
onLeave?: Callback