@regrapes/react-breakpoint-hooks
TypeScript icon, indicating that this package has built-in type declarations

0.1.7 • Public • Published

@regrapes/react-breakpoint-hooks

install size

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

Readme

Keywords

none

Package Sidebar

Install

npm i @regrapes/react-breakpoint-hooks

Weekly Downloads

25

Version

0.1.7

License

none

Unpacked Size

11.3 kB

Total Files

6

Last publish

Collaborators

  • tim.fullert
  • regrapes-bot
  • torsten4385
  • tsollbach
  • jguse