blob: c68a4a6a86804d10b5be3d922794e76cfe40466f (
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 = false) {
const [isVisible, setVisible] = useState(initialState);
const intersectionObserver = useMemo(() => {
return new IntersectionObserver(
([entry]) => { setVisible(entry.isIntersecting); },
{
threshold: 0.5
}
);
}, []);
useEffect(() => {
if (ref.current)
intersectionObserver.observe(ref.current);
return () => { intersectionObserver.disconnect(); };
}, [ref, intersectionObserver]);
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;
}
|
