useValue

useValue is a custom hook that combines useBreakpointValue and 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>

If you use this code, you need to add "use client" to the top of the file.

The current colorMode is "light"

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

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

If you use this code, you need to add "use client" to the top of the file.

Usage

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

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

import { useValue } from "@workspaces/ui"

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

useValue is using useBreakpointValue and useColorModeValue.

Uses Components & Hooks

useBreakpoint is a custom hook that returns the current breakpoint. This hook monitors changes in the window size and returns the appropriate value.

Used By Components & Hooks

ActionBar is a component that is used to display a bottom action bar with a set of actions.

AlphaSlider is a component used to allow the user to select color transparency.

Drawer is a component for a panel that appears from the edge of the screen.

Group is a component that groups and attaches multiple elements together.

HueSlider is a component used to allow the user to select a color hue.

InfiniteScrollArea is a component that provides infinite scrolling functionality. This component offers a smooth scrolling experience by automatically loading and displaying the next dataset when the end of the component is reached.

Modal is a component that is displayed over the main content to focus the user's attention solely on the information.

Popover is a component that floats around an element to display information.

Reorder is a component that allows you to change the order of items using drag and drop.

Resizable is accessible resizable panel groups and layouts with keyboard support.

SegmentedControl is a component used for allowing users to select one option from multiple choices.

Sidebar is a component used to display a list of items in a sidebar.

Slide is a component that shows or hides an element from the corners of the page.

Slider is a component used for allowing users to select a value from a range.

Steps is a component that displays the progress of a multi-step process.

Tabs is a component for switching between different display areas.

Timeline is a component that is used to display a list of events in chronological order.