useBreakpointValue
useBreakpointValue is a custom hook that returns the value of the current breakpoint from the provided object. This hook monitors changes in the window size and returns the appropriate value.
Import
import { useBreakpointValue } from "@yamada-ui/react"
Usage
Editable example
const breakpoint = useBreakpoint() const bg = useBreakpointValue({ base: "red.500", xl: "blue.500", lg: "green.500", md: "yellow.500", sm: "purple.500", }) return ( <Box bg={bg} p="md" rounded="md" color="white" transitionProperty="all" transitionDuration="slower" > The current breakpoint is "{breakpoint}" </Box> )
The keys of the object define the keys set in the theme's breakpoint.
If you want to learn more about responsive styles, please check here.
Edit this page on GitHub