Package Exports

use-intersection-hook
use-intersection-hook/lib/cjs/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (use-intersection-hook) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

use-intersection-hook

This is a simple React Hooks that trigger a callback all time the element is viewed.

Installation

Just run a yarn add use-intersection-hook or npm i --save use-intersection-hook

How to use

Simply import use-intersection-hook on your component, then call this on that way:

import React, { useEffect } from "react";
import { useIntersectionObserver } from "use-intersection-hook";

export const Example = () => {
  const { observe, disconnect } = useIntersectionObserver();

  useEffect(() => {
    // ... stuff
    return () => disconnect();
  }, []);

  const observerCallback = () => console.log("Hello world was viewed");
  const observerOptions = {
    rootMargin: "20px",
  };

  return (
    <section ref={observe(observerCallback, observerOptions)}>
      <span>Hello world!</span>
    </section>
  );
};

Every time the component was viewed by the client, a callback will be triggered

TODO:

Apply some cool CSS to example
Deploy example to GH pages!
Configure Github Actions