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

function Example() {
  const isXLAndUnder = useBreakpoint('width', 'max-xl');
  return <Text>{isXLAndUnder ? 'Yes' : 'No'}</Text>;
}

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

function Example() {
  const isLgAndAbove = useBreakpoint('width', 'min-lg');
  return <Text>{isLgAndAbove ? 'Yes' : 'No'}</Text>;
}

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

function Example() {
  const isLg = useBreakpoint('width', 'lg');
  return <Text>{isLg ? 'Yes' : 'No'}</Text>;
}

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.