React + Tailwind css でBreakpointを取得する方法

yosi2024/08/28 3:04

React + Tailwind cssを使っています。JSX内でif分を使ってPCとモバイルの表示を切り替えたいです。
breakpointの取得方法を教えてください。

Answerer AIPowered by gpt-3.5-turbo

ReactとTailwind CSSを使用している場合、ブレークポイントを取得するためには、通常、window.innerWidthやwindow.matchMediaを使用します。

以下は、window.innerWidthを使用してブレークポイントを取得する例です：

import React from 'react';

function MyComponent() {
  const [isMobile, setIsMobile] = React.useState(false);

  React.useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth < 768);
    };

    handleResize(); // 初回のレンダリング時にブレークポイントを取得

    window.addEventListener('resize', handleResize);

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

  return (
    <div className={isMobile ? 'mobile-styles' : 'pc-styles'}>
      {/* レスポンシブなコンテンツをここに表示 */}
    </div>
  );
}

上記の例では、isMobileステートを使用して、ブレークポイントがモバイルかPCかを判定しています。useEffectフックを使用して、初期化とリサイズイベントの監視を行っています。

別の方法として、window.matchMediaを使用してブレークポイントを取得することもできます。以下は、その例です：

import React from 'react';

function MyComponent() {
  const [isMobile, setIsMobile] = React.useState(false);

  React.useEffect(() => {
    const query = window.matchMedia('(max-width: 767px)');

    const handleQueryChange = (event) => {
      setIsMobile(event.matches);
    };

    handleQueryChange(query); // 初回のレンダリング時にブレークポイントを取得

    query.addListener(handleQueryChange);

    return () => {
      query.removeListener(handleQueryChange);
    };
  }, []);

  return (
    <div className={isMobile ? 'mobile-styles' : 'pc-styles'}>
      {/* レスポンシブなコンテンツをここに表示 */}
    </div>
  );
}

上記の例では、window.matchMediaを使用して'(max-width: 767px)'のメディアクエリを作成し、マッチするかどうかを監視しています。addListenerとremoveListenerを使用して、イベントリスナーの追加と削除を行っています。

いずれの方法を選んでも、isMobileステートに基づいて表示を切り替えることができます。CSSクラス名に基づいてスタイリングを適用するなど、さまざまな方法でレスポンシブなコンテンツを実装することができます。

yosi2024/08/28 3:04

Tailwind cssから直接取得できないのね

yosi2024/08/28 3:13

jsでも取得できた。

https://stackoverflow.com/questions/59982018/how-do-i-get-tailwinds-active-breakpoint-in-javascript

しかし、ワーニングが出た。

Module "source-map-js" has been externalized for browser compatibility. Cannot access "source-map-js.SourceMapConsumer" in client code. See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.

コメントするにはログインが必要です

yosi