ViewportChecker

Importing the component

import { ViewportChecker } from '@dennisdigital/polaris-components-viewportchecker';

Using the component

This component consists of a React component, that requires a prop of range, which takes in an array of objects to define ranges of viewport widths within which child components will be rendered:

<ViewportChecker
  range={
    [
      {
        min: 0,
        max: 768,
      },
      {
        min: 1280,
        max: 1920,
      }
    ]
  }
>
  <p>This paragraph is only visible when the viewport has a width of between 0px to 768px or 1280px to 1920px.</p>
</ViewportChecker>

useViewport hook

This component also exports a custom hook to measure the current viewport of a site:

import { useViewport } from '@dennisdigital/polaris-components-viewportchecker';

const { width, height } = useViewport();

useViewportType hook

This component also exports a custom hook to define the site's viewport type (mobile/desktop):

import { useViewportType } from '@dennisdigital/polaris-components-viewportchecker';

const { isMobile, isDesktop } = useViewportType({
  breakpointsMobile: props.config.breakpoints.mobile,
  breakpointsDesktop: props.config.breakpoints.desktop,
});

props.config -- can be taken from withPolaris (@dennisdigital/polaris-components-polaris)

import { withPolaris } from '@dennisdigital/polaris-components-polaris';
return compose(withPolaris)(Component);

Example breakpointsDesktop

[
  {min: 1024, max: 9999}
]

Example breakpointsMobile

[
  {min: 0, max: 1023}
]