React でウィンドウの幅を取得する

この記事では、React でウィンドウ幅の値を見つける方法を紹介します。

応答性は、最新の Web 開発の基盤の 1つです。 最近では、ラップトップ、デスクトップ、携帯電話、さらにはゲーム機など、さまざまなデバイスから Web サイトを閲覧しています。

応答性とは、ユーザーのニーズに対応し、ユーザーのデバイスに基づいてアプリケーションのレイアウトを調整することを意味します。

React でウィンドウの幅を取得する

あらゆるデバイスの最も重要な機能は、その画面サイズです。 React アプリケーションでは、画面サイズをピクセル単位で表す数値に簡単にアクセスできます。

次に、この情報を使用して、React アプリの外観と機能を変更できます。 画面サイズ (ピクセル単位) を使用して、クラスを条件付きで適用できます。

たとえば、ウィンドウの幅が 600 ピクセル未満の場合はパディングを 10 ピクセルにし、600 ピクセルを超える場合はパディングを 20 ピクセルにします。 つまり、画面の幅を使用して、コンテンツがページにどの程度収まるかを確認できます。

ウィンドウ幅の値をコンポーネントの状態に格納できます。 実行時にウィンドウの幅が変更された場合、状態値を更新された幅に設定するように React アプリケーションを設定できます。

React クラス コンポーネントでウィンドウ幅を取得する

クラス コンポーネントでは、.addEventListener() メソッドを使用して、window オブジェクト自体の resize イベントをリッスンする必要があります。 ユーザーがウィンドウの幅を変更するたびに、イベント ハンドラーが実行され、ウィンドウの幅の値が更新されます。

コード：

constructor(props) {
    super(props);
    this.state = { windowWidth: 0, windowHeight: 0 };
    this.handleResize = this.handleResize.bind(this);
}

componentDidMount() {
    this.handleResize();
    window.addEventListener('resize', this.handleResize);
}

componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize);
}

handleResize() {
    this.setState({ windowWidth: window.innerWidth, windowHeight: window.innerHeight });
}

まず、状態を開始し、windowWidth プロパティと windowHeight プロパティをデフォルト値の 0 に設定することから始めます。また、handleResize メソッドもバインドします。

componentDidMount() ライフサイクル メソッドで、初めて handleResize() メソッドを呼び出します。 これにより、ページの初期サイズと resize イベントのハンドラーが設定されます。

componentWillUnmount ライフサイクル メソッドでは、イベント リスナーを削除します。

最後に、window オブジェクトの innerWidth プロパティを使用して、ウィンドウの幅にアクセスします。 innerHeight プロパティを使用して高さを取得します。

setState() メソッドを使用して、クラス コンポーネントの状態を更新し、状態プロパティをこれらのディメンションに設定します。

React 関数コンポーネントでウィンドウ幅を取得する

関数コンポーネントでは、カスタム useWindowDimensions フックを作成し、それを使用してウィンドウの幅と高さの値を簡単に取得できます。

useWindowDimensions フックの定義を見てみましょう。

コード：

import { useState, useEffect } from 'react';

function getWindowDimensions() {
    const width = window.innerWidth
    const height = window.innerHeight
    return {
        width,
        height
    };
}

export default function useWindowDimensions() {
    const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
    useEffect(() => {
        function handleResize() {
            setWindowDimensions(getWindowDimensions());
        }
        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, []);

    return windowDimensions;
}

次に、コア React ライブラリからインポートされた useEffect フックを使用して、ライフサイクル コンポーネントで行ったのと同じタスクを実行します。イベント リスナーを追加して一度実行すると、コンポーネントがマウントされたときに初期ウィンドウのサイズが取得され、イベント リスナーが削除されたときにイベント リスナーが削除されます。 アンマウントします。

セットアップが完了すると、useWindowDimensions フックを他のコンポーネント内にインポートし、それを使用してウィンドウの幅と高さを簡単に取得できます。

コード：

const App = () => {
    const { height, width } = useWindowDimensions();
    return (
        <div>
            The width of your window: {width}
            The height of your window: {height}
        </div>
    );
}