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 returnundefined
in the first render.
function Example() {const variant = useBreakpointValue({ base: 'outline', md: 'solid' })return (<VStack align='flex-start'><Text>Resize your window to see the button variant change</Text><Button colorScheme='teal' variant={variant}>Button</Button></VStack>)}