⚒️
ユーザーのwindowサイズを検知するカスタムhookの作り方
いつも作り方を忘れるのでメモ
実装方法
useMediaQuery
export function useMediaQuery(query: string) {
const [value, setValue] = useState(false);
useEffect(() => {
function onChange(event: MediaQueryListEvent) {
setValue(event.matches);
}
const result = matchMedia(query);
result.addEventListener("change", onChange);
setValue(result.matches);
return () => result.removeEventListener("change", onChange);
}, [query]);
return value;
}
呼び出し側
export default function App() {
const isDesktop = useMediaQuery("(min-width: 768px)")
if (isDesktop) {
return (
<SomeComponent/>
)
}
...
}
Discussion