useOnScreen

Tracks whenever a given element is visible on screen.

Installation

npx rabbithook@latest add use-on-screen

Usage

Typescript

App.tsx

import useOnScreen from "@/hooks/use-on-screen";

function Component() {
  const ref = useRef<HTMLDivElement>(null)

  const isVisible = useOnScreen(ref);

  return (
    <div>
      <div style={{ height: "100vh" }}>Scroll to see the magic</div>
      <div ref={ref}>
        {isVisible ? "Visible" : "Not visible"}
      </div>
    </div>
  );
}

Javascript

App.jsx

import useOnScreen from "@/hooks/use-on-screen";

function Component() {
  const ref = useRef()

  const isVisible = useOnScreen(ref);

  return (
    <div>
      <div style={{ height: "100vh" }}>Scroll to see the magic</div>
      <div ref={ref}>
        {isVisible ? "Visible" : "Not visible"}
      </div>
    </div>
  );
}

Code

Typescript

use-on-screen.ts

import { RefObject, useEffect, useState } from "react";

function useOnScreen(ref: RefObject<Element>, offset = 0) {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;

    const observer = new IntersectionObserver(
      ([entry]) => {
        setIsVisible(entry.isIntersecting);
      },
      { rootMargin: `${offset}px` }
    );

    observer.observe(element);

    return () => {
      observer.unobserve(element);
    };
  }, [ref, offset]);

  return isVisible;
}

export default useOnScreen;

Javascript

use-on-screen.js

import { useEffect, useState } from "react";

function useOnScreen(ref, offset = 0) {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    if (ref.current == null) return;

    const observer = new IntersectionObserver(
      ([entry]) => setIsVisible(entry.isIntersecting),
      { rootMargin: `${offset}px` }
    );

    observer.observe(ref.current);

    return () => {
      if (ref.current == null) return;

      observer.unobserve(ref.current);
    }
  }, [ref.current, offset])

  return isVisible;
}

export default useOnScreen;