useValue

useValueは、useBreakpointValueとuseColorModeValueを組み合わせたカスタムフックです。

The current breakpoint is "base"

const breakpoint = useBreakpoint()
const color = useValue({ base: "red", md: "green" })

return <Box color={color}>The current breakpoint is "{breakpoint}"</Box>

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

The current colorMode is "light"

const { colorMode } = useColorMode()
const color = useValue(["green", "red"])

return <Box color={color}>The current colorMode is "{colorMode}"</Box>

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

使い方

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

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

import { useValue } from "@workspaces/ui"

const color = useValue({ base: "red", md: "green" })

useValueは、useBreakpointValueとuseColorModeValueを使用しています。