useBreakpoint#

Import#

import { useBreakpoint } from 'bumbag';

Usage#

The useBreakpoint hook will return a boolean depending if the particular breakpoint query is met.

In the example below, isWidescreenAndUnder will return truthy if it is under the max widescreen width viewport (1199px).

function Example() {
  const isWidescreenAndUnder = useBreakpoint('max-widescreen');
  return <Text fontSize={{ default: '200', 'max-widescreen': '400' }}>{isWidescreenAndUnder ? 'Yes' : 'No'}</Text>;
}

Schema#

const doesMatch = useBreakpoint(breakpoint)

Parameters#

breakpoint string

A valid breakpoint from the theme.

Return values#

doesMatch boolean

Returns truthy if the query is matched.