1. useBreakpoints hook

// create a custom hook to get the current breakpoint
import { useState, useEffect } from "react";

const useBreakpoints = () => {
  const [breakpoint, setBreakpoint] = useState("");

  const isMobile = useMediaQuery({ query: "(max-width: 768px)" });
  const isTablet = useMediaQuery({ query: "(max-width: 1024px)" });
  const isDesktop = useMediaQuery({ query: "(min-width: 1025px)" });

  useEffect(() => {
    if (isMobile) {
      setBreakpoint("mobile");
    } else if (isTablet) {
      setBreakpoint("tablet");
    } else if (isDesktop) {
      setBreakpoint("desktop");
    }
  }, [isMobile, isTablet, isDesktop]);

  return { breakpoint, isMobile, isTablet, isDesktop };
};

export default useBreakpoints;

const useMediaQuery = ({ query }: { query: string }) => {
  const [matches, setMatches] = useState(
    typeof window !== "undefined" && window.matchMedia(query).matches
  );

  useEffect(() => {
    const media = window.matchMedia(query);
    if (media.matches !== matches) {
      setMatches(media.matches);
    }
    const listener = () => setMatches(media.matches);
    media.addEventListener("change", listener);
    
    return () => media.removeEventListener("change", listener);
  }, [matches, query]);

  return matches;
};

2. useScrollDirection hook

import React from "react";

const useScrollDirection = () => {
  const [dir, setDir] = React.useState("");
  const [value, setValue] = React.useState(0);

  React.useEffect(() => {
    let lastScrollTop = 0;
    const handleScroll = () => {
      const st = window.scrollY || document.documentElement.scrollTop;
      setValue(st);

      if (st > lastScrollTop) {
        setDir("down");
      } else {
        setDir("up");
      }
      lastScrollTop = st <= 0 ? 0 : st;
    };

    // window.addEventListener("wheel", (e) => {
    //   if (e.deltaY > 0) {
    //     console.log("scrolling down");
    //   } else if (e.deltaY < 0) {
    //     console.log("scrolling up");
    //   }
    // });

    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return { dir, value };
};

export default useScrollDirection;

Logo

Hyman Fashion

1. useBreakpoints hook

2. useScrollDirection hook