このチャプターの目次
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 />
}