useMediaQuery
useMediaQuery is a custom hook that detects whether it matches a single or multiple media queries.
Import
import { useMediaQuery } from "@yamada-ui/react"
Usage
Editable example
const [isLarge, isDark] = useMediaQuery([ "(min-width: 1280px)", "(prefers-color-scheme: dark)", ]) return ( <> <Text>{isLarge ? "larger than 1280px" : "smaller than 1280px"}</Text> <Text>{isDark ? "color mode is dark" : "color mode is light"}</Text> </> )
Edit this page on GitHub