# @regrapes/react-breakpoint-hooks

[![install size](https://packagephobia.com/badge?p=@regrapes/react-breakpoint-hooks@0.1.5)](https://packagephobia.com/result?p=@regrapes/react-breakpoint-hooks@0.1.5)

This project is maintained by [REGRAPES](https://grapes.de/).

## Intention

Creates easy to use breakpoint hooks for react, based on `@react-hook/media-query` package and inspired by Material UIs [breakpoint definitions](https://material-ui.com/customization/breakpoints/) (can be overwritten).

## Install

`npm i @regrapes/react-breakpoint-hooks`

## Example

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

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

```javascript
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](https://material-ui.com/customization/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`:

```javascript
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