useMediaQuery

useMediaQueryは、単一または複数のメディアクエリに一致するかどうかを検知するカスタムフックです。

smaller than 1280px

const large = useMediaQuery("(min-width: 1280px)")

return <Text>{large ? "larger than 1280px" : "smaller than 1280px"}</Text>

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

使い方

import { useMediaQuery } from "@yamada-ui/react"

import { useMediaQuery } from "@/components/ui"

import { useMediaQuery } from "@workspaces/ui"

const large = useMediaQuery("(min-width: 1280px)")