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.

Source @yamada-ui/use-breakpoint

Import

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

Copied!

Usage

Editable example

const breakpoint = useBreakpoint()
const bg = useBreakpointValue({
  base: "red.500",
  "2xl": "pink.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>
)

Copied!

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

PrevioususeBreakpointState NextuseClipboard