@regrapes/react-breakpoint-hooks

This project is maintained by REGRAPES.

Intention

Creates easy to use breakpoint hooks for react, based on @react-hook/media-query package and inspired by Material UIs breakpoint definitions (can be overwritten).

Install

npm i @regrapes/react-breakpoint-hooks

Example

import { BreakpointProvider } from "@regrapes/react-breakpoint-hooks";

<BreakpointProvider>
  <App />
</BreakpointProvider>;

import { useBreakpoints } from "@regrapes/react-breakpoint-hooks";

function App() {
  const { isScreenMD } = useBreakpoints();

  return (
    <div className="App">
      {isScreenMD.exact && <div>Renders only on exact screen size MD</div>}
      {isScreenMD.up && (
        <div>Renders only on screen size MD and above (LG, XL)</div>
      )}
      {isScreenMD.down && (
        <div>Renders only on screen size MD and below (SM, XS)</div>
      )}
    </div>
  );
}

Default breakpoints

| Breakpoint | Size (px) | | ---------- | :-------: | | XS | 0 | | SM | 600 | | MD | 960 | | LG | 1280 | | XL | 1920 |

Inspired by Material UIs breakpoints

Options

useBreakpoints() provides...

const { isScreenXS, isScreenSM, isScreenMD, isScreenLG, isScreenXL } = useBreakpoints();

Every options provide exact, up and down property, which return a boolean.

Overwriting breakpoints

You can use your own breakpoints by passing your own breakpoints into the BreakpointProvider:

import { BreakpointProvider } from "@regrapes/react-breakpoint-hooks";

const BREAKPOINTS = {
  XS: 0,
  SM: 600,
  MD: 960,
  LG: 1280,
  XL: 1920,
};

<BreakpointProvider breakpoints={BREAKPOINTS}>
  <App />
</BreakpointProvider>;

LICENSE

MIT