https://github.com/apaleslimghost/react-element-breakpoints

Element Queries in React, using the ResizeObserver polyfill.
https://github.com/apaleslimghost/react-element-breakpoints

css element-queries react resize-observer styled-components

Last synced: 19 days ago
JSON representation

Element Queries in React, using the ResizeObserver polyfill.

• Host: GitHub
• URL: https://github.com/apaleslimghost/react-element-breakpoints
• Owner: apaleslimghost
• Created: 2017-03-28T13:08:32.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-03-28T13:38:00.000Z (over 7 years ago)
• Last Synced: 2024-09-19T03:48:18.700Z (about 2 months ago)
• Topics: css, element-queries, react, resize-observer, styled-components
• Language: JavaScript
• Homepage:
• Size: 6.84 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

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 => 


	It works!

);

```


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'})},

`);

```