useBreakpoint
useBreakpoint is a custom hook that returns the current breakpoint. This hook monitors changes in the window size and returns the appropriate value.
The current breakpoint is "base".
const breakpoint = useBreakpoint()
return <Text>The current breakpoint is "{breakpoint}".</Text>
If you use this code, you need to add
"use client" to the top of the file.Usage
import { useBreakpoint } from "@yamada-ui/react"
import { useBreakpoint } from "@/components/ui"
import { useBreakpoint } from "@workspaces/ui"
const breakpoint = useBreakpoint()
The return value refers to the breakpoint of the theme.