useBreakpoint

import { useBreakpoint } from 'react-laag';

Layer's that are tied to a trigger element usually work great on desktop, but sometimes the user experience isn't good on mobile devices. In order to detect the users viewport size you can use useBreakpoint, which allows you to adjust the layers styling and behavior accordingly. Under the hood, this hook makes use of window.matchMedia, which is very performant in checking changes in viewport sizes.

Type

(maxPixels: number): boolean

Example

function Example() {
  // check if user is on screen with a width of <= 480 pixels
  const isMobile = useBreakpoint(480);

  return (
    <ToggleLayer
      renderLayer={({ layerProps }) =>
        isOpen && (
          <Layer
            ref={layerProps.ref}
            style={{
              ...layerProps.style,
              // pick width depending on 'isMobile'
              width: isMobile ? 400 : 300
            }}
          />
        )
      }
      // rest of props...
    >
      {({ triggerRef, toggle }) => (
        <button ref={triggerRef} onClick={toggle}>
          hover me!
        </button>
      )}
    </ToggleLayer>
  );
}