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.