-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
52 lines (52 loc) · 1.62 KB
/
index.js
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
46
47
48
49
50
51
52
import { useMemo, useState, useEffect } from "react";
let isClient = typeof window !== "undefined",
getCurrent = (queries) => {
let index = queries.findIndex((query) => isClient && !query.q.matches),
queryIndex = (~index ? index : queries.length) - 1;
return queryIndex >= 0 ? queries[queryIndex].bp : void 0;
},
getResult = (queries) => {
let current = getCurrent(queries),
currentIndex = queries.findIndex((query) => query.bp === current),
res = queries.reduce((acc, q, index) => {
acc[q.bp] = currentIndex >= index;
return acc;
}, {});
res.current = current;
return res;
},
useMedia = (breakpoints) => {
let queries = useMemo(
() =>
Object.keys(breakpoints)
.sort((a, b) => +breakpoints[a] - +breakpoints[b])
.map((bp) => {
let q = isClient
? window.matchMedia(`(min-width:${breakpoints[bp]}px)`)
: void 0;
return { q, bp };
}),
Object.values(breakpoints)
);
let [result, setResult] = useState(getResult(queries));
useEffect(() => {
let handler = () => setResult(getResult(queries));
queries.forEach((query) => {
try {
query.q.addEventListener("change", handler);
} catch (err) {
query.q.addListener(handler);
}
});
return () =>
queries.forEach((query) => {
try {
query.q.removeEventListener("change", handler);
} catch (err) {
query.q.removeListener(handler);
}
});
}, [queries]);
return result;
};
export { useMedia };