git.iko.soy/bridge
on master help sign in
bridge/src/lib/useMedia.js
31 lines 1.1 kB history raw
1import { useCallback, useMemo, useState, useEffect } from 'react';
3// via: https://usehooks.com/useMedia/
4// NB(shrugs): we reverse the order because we want to be 'mobile first'
5// and therefore want the breakpoint that is the most "specific"
6export default function useMedia(queries, values, defaultValue) {
7 const reverseValues = useMemo(() => values.reverse(), [values]);
8 const mediaQueryLists = useMemo(
9 () => queries.reverse().map(q => window.matchMedia(q)),
10 [queries]
11 );
13 const getValue = useCallback(() => {
14 const index = mediaQueryLists.findIndex(mql => mql.matches);
16 return typeof reverseValues[index] !== 'undefined'
17 ? reverseValues[index]
18 : defaultValue;
19 }, [mediaQueryLists, reverseValues, defaultValue]);
21 const [value, setValue] = useState(getValue);
23 useEffect(() => {
24 const handler = () => setValue(getValue);
25 mediaQueryLists.forEach(mql => mql.addListener(handler));
27 return () => mediaQueryLists.forEach(mql => mql.removeListener(handler));
28 }, [mediaQueryLists, getValue]);
30 return value;