useMediaQuery
useMediaQuery
is a custom hook that detects whether it matches a single or multiple media queries.
smaller than 1280px
const large = useMediaQuery("(min-width: 1280px)")
return <Text>{large ? "larger than 1280px" : "smaller than 1280px"}</Text>
If you use this code, you need to add
"use client"
to the top of the file.Usage
import { useMediaQuery } from "@yamada-ui/react"
import { useMediaQuery } from "@/components/ui"
import { useMediaQuery } from "@workspaces/ui"
const large = useMediaQuery("(min-width: 1280px)")