React hook to monitor an element enters or leaves the viewport

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

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

const App = () => {
  const { ref, inView, scrollDirection, entry, observe, unobserve } = useInView(
    {
      threshold: 0.25, // 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 ?" : "Bye, I am ?"}</div>;
};

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

const LazyImage = ({ width, height, ...rest }) => {
  const { ref, inView } = useInView({
    // Stop observe when the target enters the viewport, so the "inView" only triggered once
    unobserveOnEnter: true,
    // For better UX, we can grow the root margin so the image will be loaded before it comes to the viewport
    rootMargin: "50px",
  });

  return (
    <div className="placeholder" style={{ width, height }} ref={ref}>
      {inView && <img {...rest} />}
    </div>
  );
};

import React, { useState } from "react";
import useInView from "react-cool-inview";
import axios from "axios";

const App = () => {
  const [todos, setTodos] = useState(["todo-1", "todo-2", "..."]);
  const { ref } = useInView({
    // For better UX, we can grow the root margin so the data will be loaded before a user sees the loading indicator
    rootMargin: "50px 0",
    // When the loading indicator comes to the viewport
    onEnter: ({ unobserve, observe }) => {
      // Pause observe when loading data
      unobserve();
      // Load more data
      axios.get("/todos").then((res) => {
        setTodos([...todos, ...res.todos]);
        // Resume observe after loading data
        observe();
      });
    },
  });

  return (
    <div>
      {todos.map((todo) => (
        <div>{todo}</div>
      ))}
      <div ref={ref}>Loading...</div>
    </div>
  );
};

import React, { useState } from "react";
import useInView from "react-cool-inview";
import { FixedSizeList as List } from "react-window";
import axios from "axios";

const Row = ({ index, data, style }) => {
  const { todos, handleLoadingInView } = data;
  const isLast = index === todos.length;
  const { ref } = useInView({ onEnter: handleLoadingInView });

  return (
    <div style={style} ref={isLast ? ref : null}>
      {isLast ? "Loading..." : todos[index]}
    </div>
  );
};

const App = () => {
  const [todos, setTodos] = useState(["todo-1", "todo-2", "..."]);
  const [isFetching, setIsFetching] = useState(false);

  const handleLoadingInView = () => {
    // Row component is dynamically created by react-window, we need to use the "isFetching" flag
    // instead of unobserve/observe to avoid re-fetching data
    if (!isFetching)
      axios.get("/todos").then((res) => {
        setTodos([...todos, ...res.todos]);
        setIsFetching(false);
      });

    setIsFetching(true);
  };

  // Leverage the power of react-window to help us address the performance bottleneck
  return (
    <List
      height={150}
      itemCount={todos.length + 1} // Last one is for the loading indicator
      itemSize={35}
      width={300}
      itemData={{ todos, handleLoadingInView }}
    >
      {Row}
    </List>
  );
};

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

const App = () => {
  const { ref, inView } = useInView({
    // Stop observe when the target enters the viewport, so the "inView" only triggered once
    unobserveOnEnter: true,
    // Shrink the root margin, so the animation will be triggered once the target reach a fixed amount of visible
    rootMargin: "-100px 0",
  });

  return (
    <div className="container" ref={ref}>
      <div className={inView ? "fade-in" : ""}>I'm a ?</div>
    </div>
  );
};

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

const App = () => {
  const { ref } = useInView({
    // For an element to be considered "seen", we'll say it must be 100% in the viewport
    threshold: 1,
    onEnter: ({ unobserve }) => {
      // Stop observe when the target enters the viewport, so the callback only triggered once
      unobserve();
      // Fire an analytic event to your tracking service
      someTrackingService.send("? is seen");
    },
  });

  return <div ref={ref}>I'm a ?</div>;
};

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

const App = () => {
  const {
    ref,
    inView,
    // vertical will be "up" or "down", horizontal will be "left" or "right"
    scrollDirection: { vertical, horizontal },
  } = useInView({
    // Scroll direction is calculated whenever the target meets a threshold
    // more trigger points the calculation will be more instant and accurate
    threshold: [0.2, 0.4, 0.6, 0.8, 1],
    onChange: ({ scrollDirection }) => {
      // We can also access the scroll direction from the event object
      console.log("Scroll direction: ", scrollDirection.vertical);
    },
  });

  return (
    <div ref={ref}>
      <div>{inView ? "Hello, I am ?" : "Bye, I am ?"}</div>
      <div>{`You're scrolling ${vertical === "up" ? "⬆️" : "⬇️"}`}</div>
    </div>
  );
};

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

const App = () => {
  // With Intersection Observer v2, the "inView" not only tells you the target
  // is intersecting with the root, but also guarantees it's visible on the page
  const { ref, inView } = useInView({
    // Track the actual visibility of the target
    trackVisibility: true,
    // Set a minimum delay between notifications, it must be set to 100 (ms) or greater
    // For performance perspective, use the largest tolerable value as much as possible
    delay: 100,
    onEnter: () => {
      // Triggered when the target is visible and enters the viewport
    },
    onLeave: () => {
      // Triggered when the target is visible and leaves the viewport
    },
  });

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

const ref = useRef();
const { inView } = useInView({ ref });

const returnObj = useInView(options?: object);

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

import "intersection-observer";

(async () => {
  if (!("IntersectionObserver" in window))
    await import("intersection-observer");
})();

onChange = (event) => requestIdleCallback(() => this.handleChange(event));