import { useBreakpointValue } from 'bumbag';


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.

Editable example


const value = useBreakpointValues(breakpointValueMap)


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

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


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.

On this page
Copyright © 2021 Jake Moxey