All files / Rindu/hooks useOnSmallScreen.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
19x
 
27x
 
 
 
27x
 
27x
23x
23x
23x
 
 
 
 
 
 
 
23x
23x
 
23x
 
 
27x
 
 
import { useEffect, useState } from "react";
 
export function useOnSmallScreen(
  callback?: (isSmall: boolean) => void,
  width = 768
): boolean {
  const [isSmallScreen, setIsSmallScreen] = useState(false);
 
  useEffect(() => {
    const handleResize = () => {
      const isSmall = window.innerWidth < width;
      Iif (isSmall !== isSmallScreen) {
        setIsSmallScreen(isSmall);
        Iif (callback) {
          callback(isSmall);
        }
      }
    };
 
    window.addEventListener("resize", handleResize);
    handleResize();
 
    return () => window.removeEventListener("resize", handleResize);
  }, [callback, isSmallScreen, width]);
 
  return isSmallScreen;
}