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.

The current breakpoint is "base"

const breakpoint = useBreakpoint()
const bg = useBreakpointValue({
  base: "red.500",
  sm: "purple.500",
  md: "yellow.500",
  lg: "green.500",
  xl: "blue.500",
  "2xl": "pink.500",
})

return (
  <Box
    bg={bg}
    color="white"
    p="md"
    transitionDuration="moderate"
    transitionProperty="all"
  >
    The current breakpoint is "{breakpoint}"
  </Box>
)

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

Usage

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

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

import { useBreakpointValue } from "@workspaces/ui"

const bg = useBreakpointValue({
  base: "red.500",
  sm: "purple.500",
  md: "yellow.500",
  lg: "green.500",
  xl: "blue.500",
  "2xl": "pink.500",
})