# react-element-breakpoints

> react-element-breakpoints ===

Latest version **1.0.2** (published 2017-03-28) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-element-breakpoints
pnpm add react-element-breakpoints
yarn add react-element-breakpoints
bun add react-element-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.0.2 |
| Published | 2017-03-28 |
| First published | 2017-03-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Maintainers | quarterto |

## Links

- npm: https://www.npmjs.com/package/react-element-breakpoints
- Repository: https://github.com/quarterto/react-element-breakpoints
- Homepage: https://github.com/quarterto/react-element-breakpoints#readme
- Issues: https://github.com/quarterto/react-element-breakpoints/issues
- npm.io page: https://npm.io/package/react-element-breakpoints

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^15.4.2
- [react-dom](https://npm.io/package/react-dom.md) ^15.4.2
- [lodash.mapvalues](https://npm.io/package/lodash.mapvalues.md) ^4.6.0
- [resize-observer-polyfill](https://npm.io/package/resize-observer-polyfill.md) ^1.4.1

## Recent versions

- 1.0.2 (latest) — 2017-03-28
- 1.0.1 — 2017-03-28

## README

react-element-breakpoints
===

A higher-order-component for Element Queries in React, using the ResizeObserver polyfill.

usage
---

```js
import {withBreakpoints, bp} from 'react-element-breakpoints';

const FancyHeader = withBreakpoints({
	wide: ({width}) => width >= 400,
	tall: ({height}) => height >= 200,
})(props => <h1 style={{
	fontSize: bp('18px', {
		wide: '30px'
	})(props),

	color: bp('black', {tall: 'red'})(props),
}}>
	It works!
</h1>);
```

The breakpoint functions are called with the `contentRect` from the ResizeObserver entry, which contains `left`, `top`, `right`, `bottom`, `width` and `height`.

### with styled-components

The `bp` helper works well with styled-components:

```js
const FancyHeader = withBreakpoints({
	wide: ({width}) => width >= 400,
	tall: ({height}) => height >= 200,
})(styled.h1`
	font-size: ${bp('18px', {
		wide: '30px'
	})},

	color: ${bp('black', {tall: 'red'})},
`);
```

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