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

こんにちわ。nap5です。

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

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

Hello React!

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

Glitch Code Editor ･ﾟ✧

デモ動画はこちらです。

Loom | Send a video. Not a thousand words.

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

まずはフック側。

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コースを公開していますので、もしよかったら、どうぞです。

Faunaデータベースを使ったUdemyコースを作成しました — Higashi Kota

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

Tweets by napzak5

nap5

簡単ですが、以上です。