【React / Next】動的な値でメディアクエリのブレイクポイントを変更してレスポンシブ対応する

個人の備忘録です。

環境

• react: 17.0.2
• next: 11.1.3
• react-responsive: 9.0.0-beta.10
• sass: 1.49.9
• @chakra-ui/react: 1.8.5

やりたいこと

• 親component から動的な値を受け取って、ブレイクポイント値としたい
• ブレイクポイント値以下の時に、要素を display: none; で消す

ライブラリのインストール

yarn add react-responsive

react-responsive について

• CSS メディアクエリの状態を追跡する React の hooks
• 8.0.0 以上のバージョンから hooks になった
• component内で簡単にブレイクポイントを設定できる
• hooks なのでリアクティブに値を返してくれ、描画後にブラウザサイズを変えても正しく判定してくれる
• 仕様の複雑な UI を実現するケースで有効

サンプルコード

import { Text, HStack } from '@chakra-ui/react';
import { useMediaQuery } from 'react-responsive';
import styles from './contents.module.scss';

interface Props<T> {
  data: string[];
  minWidth: string | number;
}

export const Component = ({ minWidth }: Props) => {
  const isBreakPoint = useMediaQuery({ query: `(max-width: ${minWidth})` });

  const contents: React.ReactNode[] = [];
  
  for (const key in data) {
    const hiddenClass =
      isBreakPoint && key === 'hoge' ? styles.sp_hidden : '';

    contents.push(
      <>
        <Text
          minWidth={minWidth}
          className={`${hiddenClass}`}
        >
          sampleText
        </Text>
      </>
    );
  }

  return (
    <HStack minWidth={rowMinWidth}>
      {contents}
    </HStack>
  );
};

公式