useBreakpoint#

Import#

import { useBreakpoint } from 'bumbag-native';

Usage#

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

Widths#

In the example below, isXLAndUnder will return truthy if it is under the max xl width viewport (1023px).

Yes
Editable example

In the example below, isLgAndAbove will return truthy if it is above the min lg width viewport (480px).

No
Editable example

In the example below, isLg will return truthy if it is within the lg width viewport (414px to 768px).

No
Editable example

Schema#

const doesMatch = useBreakpoint(direction, breakpoint)

Parameters#

direction string

Either width or height.

breakpoint string

A valid breakpoint from the theme.

Return values#

doesMatch boolean

Returns truthy if the query is matched.

Copyright © 2021 Jake Moxey