Skip to main content

Breakpoints

Installation​

$ yarn add @rexlabs/breakpoints

Usage​

import { useMediaQuery, Breakpoints } from '@rexlabs/box';

Upgrade Guide​

Version 1.x to 2.0.0​

Updated components

  • Breakpoints - The API for this component has been updated
    • Removed mobile, tablet, and desktop props
    • Added a queries prop that configures the breakpoints that we want
    • Added a noRender prop that when true will stop this component from rendering anything, when false we will wrap the component in a div that sets display: none at the breakpoints where it shouldn't be visible
  • BreakpointProvider - The BreakpointProvider has been removed
    • Each media query is now created on the fly with useMediaQuery instead of having 3 specific breakpoints that are not able to be changed

Updated hooks

  • useBreakpoint - Removed
  • useMediaQuery - This is a new hook that will create a media query based on the queries that you pass into it
    • This is much less restrictive and will eventually allow us to be able to add more complex media queries

Updated types

  • Query - Defines what we can currently use to create media queries
interface Query {
  minWidth?: number | TokenKeys;
  maxWidth?: number | TokenKeys;
}

Copyright © 2021 Rex Software All Rights Reserved.