Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.2

useMediaQuery

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

ソース@yamada-ui/use-media-query

インポート

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

使い方

編集可能な例

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>
  </>
)
Copied!

GitHubでこのページを編集する

useLocalStorageuseNotice