🐈
[React,TS] 動的にwindowサイズを取得するhooks実装
概要
動的にwindowのwidth・heightを取得するhooksを実装してみた。
レスポンシブに画面サイズを取得したいときなど、このhooksを使い回すだけで良いので一度作っとくと何かと便利。
実装
hooksの実装
useWindowSize.ts
import React, { useLayoutEffect, useState } from 'react';
const useWindowSize = (): number[] => {
const [size, setSize] = useState([0, 0]);
useLayoutEffect(() => {
const updateSize = (): void => {
setSize([window.innerWidth, window.innerHeight]);
};
window.addEventListener('resize', updateSize);
updateSize();
return () => window.removeEventListener('resize', updateSize);
}, []);
return size;
};
hooksを呼び出して、使ってみる
GetWindowSizeComponent.tsx
export const GetWindowSizeComponent: React.FC = () => {
const [width, height] = useWindowSize();
return <>
{`${width} x ${height}`}
</>;
};
終わりに
この記事が皆さんのエンジニアライフの一助となれば幸いです。
twitterでも情報発信をしているので、良かったらフォローお願いしますmm
参考
Discussion