#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.