Chapter 11無料公開

useBreakpointでstyle以外のレスポンシブ対応も出来る

terrierscript
terrierscript
2021.05.07に更新
このチャプターの目次

style以外にコンポーネント以外でも利用したいような場合であれば、useBreakpointValueが利用できます。

const breakpointValue = useBreakpointValue(["red", "yellow", "gren", "blue"])

例えば、これを応用すると「モバイル版とデスクトップ版ではコンポーネントを分けたい」という場合に便利でしょう

const SomeComponent = () => {
  // md以下ならtrue、以上ならfalseなどでも同義
  const isMobile = useBreakpointValue({ base: true, md: false })
  if (isMobile) {
    return <MobileVersion />
  }
  return <DesktopVersion />
}

Demo