# react-web-breakpoints

> Responsive design based on breakpoints.

Latest version **1.8.0** (published 2020-03-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-web-breakpoints
pnpm add react-web-breakpoints
yarn add react-web-breakpoints
bun add react-web-breakpoints
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.8.0 |
| Published | 2020-03-01 |
| First published | 2020-02-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 14.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Sagar Panda |
| Maintainers | sagarpanda |
| Keywords | react, responsive, breakpoints, breakpoint, component |

## Links

- npm: https://www.npmjs.com/package/react-web-breakpoints
- Repository: https://github.com/sagarpanda/react-web-breakpoints
- Homepage: https://sagarpanda.github.io/react-web-breakpoints
- Issues: https://github.com/sagarpanda/react-web-breakpoints/issues
- npm.io page: https://npm.io/package/react-web-breakpoints

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.8.0 (latest) — 2020-03-01
- 1.7.0 — 2020-03-01
- 1.6.0 — 2020-03-01
- 1.5.0 — 2020-03-01
- 1.4.0 — 2020-03-01
- 1.3.0 — 2020-03-01
- 1.2.0 — 2020-02-29
- 1.1.0 — 2020-02-29
- 1.0.0 — 2020-02-29

## README

![NPM Publish](https://github.com/sagarpanda/react-web-breakpoints/workflows/NPM%20Publish/badge.svg)
[![npm](https://img.shields.io/npm/v/react-web-breakpoints.svg)](https://www.npmjs.com/package/react-web-breakpoints)

# React Web Breakpoints
Responsive design based on breakpoints [demo](https://sagarpanda.github.io/react-web-breakpoints/)
### Install
```sh
# with npm
$ npm install react-web-breakpoints --save
# or with yarn
$ yarn add react-web-breakpoints
```
### Usage
```javascript
import {
  BreakpointsProvider,
  useBreakpoints,
  withBreakpoints,
  BreakShowAt
} from 'react-web-breakpoints';
```
BreakpointsProvider
```javascript
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BreakpointsProvider } from 'react-web-breakpoints';

const mountNode = document.getElementById("app");
ReactDOM.render(
  <BreakpointsProvider breakpoints={{ sm: 0, md: 768, lg: 1024 }}>
    <App name="User" />
  </BreakpointsProvider>
  , mountNode
);
```
With Hooks - useBreakpoints (it returns current breakpoint e.g. lg)
```javascript
import React from "react";
import { useBreakpoints } from 'react-web-breakpoints';

const App = ({ name, media }) => {
  const media = useBreakpoints();
  return <h1>Hello {name} - Screen {media}</h1>;
};

export default App;
```
With HOC - withBreakpoints (wrapped component i.e. App receives new props `media`)
```javascript
import React from "react";
import { withBreakpoints } from 'react-web-breakpoints';

const App = ({ name, media }) => {
  return <h1>Hello {name} - Screen {media}</h1>;
};

export default withBreakpoints(App);
```
With BreakShowAt - renders its children when current breakpoint (say lg) match with its props (i.e. md and lg)
```javascript
import React from "react";
import { BreakShowAt } from 'react-web-breakpoints';

const App = ({ name }) => {
  return (
    <BreakShowAt md lg>
      <div>This content shows for md and lg screens.</div>
    </BreakShowAt>
  );
};

export default App;
```
### BreakpointsProvider - Props
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| breakpoints | object | { sm: 0, md: 768, lg: 1024 } | By default 0 < sm < 768, 768 < md < 1024, 1024 < lg. Object structure `{ [string]: [number], ... }` e.g. { mobile: 0, tablet: 768, desktop: 1024 } |
| defaultBreakpoint | string | null | By default null. For initial render or if window width does not fall under any range mentioned in `breakpoints` props. |

### Source Code Run

Install the dependencies and devDependencies and start the server.

```sh
$ git clone git@github.com:sagarpanda/react-web-breakpoints.git
$ cd react-web-breakpoints
$ npm install
$ npm start
```

---
_Source: https://npm.io/package/react-web-breakpoints · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._