Reactでブラウザの横幅を取得する

はじめに

タブレットやPCなどで表示を切り替える場合、横幅を取得する必要がある。Reactで横幅を取得する方法を記載します。

成果物

開発

App.tsx

import React, { useState, useEffect } from 'react';

const useWindowWidth = () => {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return width;
};

const App: React.FC = () => {
  const width = useWindowWidth();

  return (
    <div>
      <p>ブラウザの横幅: {width}px</p>
    </div>
  );
};

export default App;