useBreakpointValue

useBreakpointValue is a custom hook which returns the value for the current breakpoint from the provided responsive values object. This hook also responds to the window resizing and returning the appropriate value for the new window size.

The new variant and size props don't currently accept responsive values (specified as objects or arrays), but useBreakpointValue is a good way to achieve the same behavior.

Import#

import { useBreakpointValue } from '@chakra-ui/react'

Return value#

The useBreakpointValue hook returns the value for the current breakpoint.

Usage#

Make sure to provide a base value when using useBreakpointValue so it doesn't return undefined in the first render.

This hook is built to work in server-side rendering (SSR) applications by default. You might notice a quick flash of incorrect media query values when you use them.

If you're creating a client-side rendered app, you can leverage the ssr argument to get the correct value on the first render.

const buttonSize = useBreakpointValue({ base: 'sm', lg: 'md' }, { ssr: false })

const breakpoint = useBreakpoint({ ssr: false })