Hooks

Where it lives

• hooks/use-center-active-sidebar-item.tsGitHub ↗
• hooks/use-mobile.tsGitHub ↗
  Read the script

  import * as React from "react";
  
  const MOBILE_BREAKPOINT = 768;
  
  export function useIsMobile() {
    const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
      undefined
    );
  
    React.useEffect(() => {
      const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
      const onChange = () => {
        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
      };
      mql.addEventListener("change", onChange);
      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
      return () => mql.removeEventListener("change", onChange);
    }, []);
  
    return !!isMobile;
  }
  

• hooks/use-near-viewport.tsGitHub ↗
  Read the script

  "use client";
  
  import { useEffect, useRef, useState } from "react";
  
  export function useNearViewport<T extends Element = HTMLDivElement>(
    rootMargin: string
  ) {
    const ref = useRef<T>(null);
    const [isNearViewport, setIsNearViewport] = useState(false);
  
    useEffect(() => {
      const element = ref.current;
      if (!element || isNearViewport) {
        return;
      }
      if (typeof window.IntersectionObserver === "undefined") {
        setIsNearViewport(true);
        return;
      }
      let isDisconnected = false;
      const disconnect = () => {
        if (!isDisconnected) {
          observer.disconnect();
          isDisconnected = true;
        }
      };
      const observer = new IntersectionObserver(
        ([entry]) => {
          if (entry?.isIntersecting) {
            setIsNearViewport(true);
            disconnect();
          }
        },
        { rootMargin }
      );
      observer.observe(element);
      return disconnect;
    }, [isNearViewport, rootMargin]);
  
    return { isNearViewport, ref };
  }
  

• hooks/use-showcase-scroll-guard.tsGitHub ↗

Read the script before you install anything that runs on your machine. This is the one part of a plugin that acts without being asked.