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