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 '@passfort/castle'
content_copy
Copy

Return value

The useBreakpointValue hook returns the value for the current breakpoint.

Usage

function Example() {
  const variant = useBreakpointValue({ base: 'outline', md: 'solid' })

  return (
    <Box align="flex-start">
      <Text>Resize your window to see the button variant change</Text>
      <Button colorScheme="teal" variant={variant}>
        Button
      </Button>
    </Box>
  )
}
function Example() {
  const variant = useBreakpointValue({ base: 'outline', md: 'solid' })

  return (
    <Box align="flex-start">
      <Text>Resize your window to see the button variant change</Text>
      <Button colorScheme="teal" variant={variant}>
        Button
      </Button>
    </Box>
  )
}
content_copy
Copy
live example