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を使用しています。

使用しているコンポーネント・フック

useBreakpointは、現在のブレイクポイントを返すカスタムフックです。このフックは、ウィンドウのサイズの変更を監視し、適切な値を返します。

使用されているコンポーネント・フック

AlphaSliderは、ユーザーが色の透明度を選択するために使用されるコンポーネントです。

Drawerは、画面の端から表示されるパネルのコンポーネントです。

Groupは、複数の要素をまとめて扱うためのコンポーネントです。

HueSliderは、ユーザーが色相を選択するために使用されるコンポーネントです。

InfiniteScrollAreaは、無限スクロール機能を提供するコンポーネントです。このコンポーネントは、コンポーネントの終わりに達したときに次のデータセットを自動的に読み込み、表示することで、スムーズなスクロール体験を提供します。

Reorderは、項目の順序をドラッグアンドドロップで変更できるコンポーネントです。

Resizableは、キーボードのサポートを備えたサイズ変更可能なレイアウトコンポーネントです。

SegmentedControlは、ユーザーが複数の選択肢の中から1つを選択するために使用されるコンポーネントです。

Slideは、要素をページの隅から表示または非表示にするコンポーネントです。

Sliderは、ユーザーが値の範囲から選択するために使用されるコンポーネントです。

Stepsは、複数のステップのプロセスの進行状況を表示するコンポーネントです。

Tabsは、異なる表示領域を切り替えるコンポーネントです。