blob: 79486a396db19e138b3d8d2695c8732a84faca7a (
plain) (
blame)
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
import { useState, useEffect, useMemo } from "react";
import { type RefObject } from "react";
export function useVisible(ref: RefObject<HTMLElement>, initialState: boolean = false) {
const [isVisible, setVisible] = useState(initialState);
const intersectionObserver = useMemo(() => {
return new IntersectionObserver(
([entry]) => { setVisible(entry.isIntersecting) },
{
threshold: 0.5
}
)
}, [ref]);
useEffect(() => {
if (ref.current)
intersectionObserver.observe(ref.current);
return () => { intersectionObserver.disconnect(); };
}, [ref]);
return isVisible;
}
export function useMediaQuery(query: string) {
const queryObject = useMemo(() => {
return window.matchMedia(query);
}, [query]);
const [matches, setMatches] = useState(queryObject.matches);
useEffect(() => {
const listenHook = (e: MediaQueryListEvent) => {
setMatches(e.matches);
}
queryObject.addEventListener("change", listenHook);
return () => queryObject.removeEventListener("change", listenHook);
}, [queryObject]);
return matches;
}
|
