useBreakpointValue#

Import#

import { useBreakpointValue } from 'bumbag';

Usage#

The useBreakpointValue hook is similar to the useBreakpoint hook, however it accepts a range of breakpoints and their respective values, and will return the value respective to the current breakpoint.

Try resize your window for the example below to see the button sizes change.

function Example() {
  const size = useBreakpointValue({
    default: 'large',
    mobile: 'small',
    'max-desktop': 'medium'
  });
  return (
    <Button size={size}>Hello world</Button>
  );
}

Schema#

const value = useBreakpointValues(breakpointValueMap)

Parameters#

breakpointValueMap { [breakpoint: Breakpoint]: string | boolean | Object }

A set of breakpoints (as keys) and their values.

Example:

const size = useBreakpointValue({
  default: 'large',
  mobile: 'small',
  tablet: 'medium'
});

Click here to see a list of valid breakpoints.

Return values#

value boolean

Returns the value corresponding to the current breakpoint.