見出し画像

reacthookを利用したcolumn-countを使うレスポンシブレイアウトについて

nap5

こんにちわ。nap5です。

reacthookを利用したcolumn-countを使うレスポンシブレイアウトについて紹介したいと思います。今回はGlitchを使ってみました。


ライブサイトはこちらです。


デモコードはこちらです。


デモ動画はこちらです。


ポイントとなるコードは以下です。

まずはフック側。

import {useEffect, useState} from 'react';

const useMedia = ({queries, values, defaultValue}) => {
  const match = () => {
    return (
      values[queries.findIndex((q) => matchMedia(q).matches)] || defaultValue
    );
  };
  const [value, setVaule] = useState(match);
  useEffect(() => {
    const handleResize = () => {
      setVaule(match);
    };
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);
  return value;
};

export {useMedia};


次にフックを使う側

メディクエリ単位で何列組を適用するかを指定するところがポイントです。

  const columns = useMedia({
    queries: [
      '(min-width: 1500px)',
      '(min-width: 1000px)',
      '(min-width: 600px)',
    ],
    values: [5, 4, 3],
    defaultValue: 2,
  });
  console.log(columns);


コンポーネント単位で小回りが利くので、知っておくとハンディになると思います。


最後に、GWは終わってしまいましたが、FaunaDBを使ってみたい方は以下のUdemyコースを公開していますので、もしよかったら、どうぞです。




あと、TwitterとYoutube始めました。日々取り組んだこと投げていきます。



簡単ですが、以上です。

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!