Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mattphillips/react-point-break
React CSS media queries with breakpoint render props Component and Provider. 🔫
https://github.com/mattphillips/react-point-break
breakpoint css media-queries react react-context render-props
Last synced: 3 months ago
JSON representation
React CSS media queries with breakpoint render props Component and Provider. 🔫
- Host: GitHub
- URL: https://github.com/mattphillips/react-point-break
- Owner: mattphillips
- License: mit
- Created: 2018-02-04T21:44:16.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-02-16T11:35:21.000Z (almost 7 years ago)
- Last Synced: 2024-09-14T22:02:03.825Z (4 months ago)
- Topics: breakpoint, css, media-queries, react, react-context, render-props
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-point-break
- Size: 104 KB
- Stars: 7
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
react-point-break
React CSS media queries with breakpoint render props Component and Provider.
[](https://travis-ci.org/mattphillips/react-point-break)
[](https://codecov.io/github/mattphillips/react-point-break)
[](https://www.npmjs.com/package/react-point-break)
[](http://npm-stat.com/charts.html?package=react-point-break&from=2017-09-14)
[](https://github.com/mattphillips/react-point-break/blob/master/LICENSE)
[](http://makeapullrequest.com)
[](https://github.com/mattphillips/react-point-break/blob/master/docs/ROADMAP.md)
[](https://github.com/mattphillips/react-point-break/blob/master/docs/EXAMPLES.md)
- 🌓 css media queries
- 🎉 render props
- 🎁 connected via react context
- ❤️ small API
- ⭐️ server side rendering
`react-point-break` gives you a `` component and an optional `` used to listen to CSS
media queries and render the matching query using render props.
[Demo](http://react-point-break.mattphillips.io)
## Installation
With npm:
```sh
npm install react-point-break
```
With yarn:
```sh
yarn add react-point-break
```
## Usage
`react-point-break` can be used on its own or with a provider to give your app access to the queries anywhere in the
tree.
### `Breakpoint`
Props:
- Media queries to match, the given prop name will be passed into the render prop function, for example: `sm="(max-width: 479px)"`.
- `render` or `children`: a function that will be called with the given prop names as boolean values for the queries
that matches.
**Note you can supply the render prop function using `render` or via `children` but not both.**
```js
import { Breakpoint } from 'react-point-break';
const App = () => {
return (
{({ sm, md, lg }) => {
if (sm) {
return
This is a small view
;
}
if (md) {
return This is a medium view
;
}
if (lg) {
return This is a large view
;
}
return Default view
;
}}
)
};
```
### `BreakpointProvider`
Props:
- Media queries to match, the given prop name will be passed into the render prop function of any child `Breakpoint`
components, for example: `sm="(max-width: 479px)"`.
- `children` to be rendered.
```js
import { Breakpoint, BreakpointProvider } from 'react-point-break';
const App = () => {
return (
{({ sm, md, lg }) => {
if (sm) {
return
This is a small view
;
}
if (md) {
return This is a medium view
;
}
if (lg) {
return This is a large view
;
}
return Default view
;
}}
)
};
```
#### Additional queries and overriding
Any queries supplied to the `Breakpoint` component will be passed down into the render prop function with the queries
defined in the `BreakpointProvider`. If the additional queries share the same prop name as defined in the provider then
they will override the matching provider query.
```js
import { Breakpoint, BreakpointProvider } from 'react-point-break';
const App = () => {
return (
{({ sm, md, lg, xl }) => {
if (sm) {
return
This is a small view
;
}
if (md) {
return This is a medium view
;
}
if (lg) {
return This is a large view
;
}
if (xl) {
return This is an extra large view
;
}
return Default view
;
}}
)
};
```
## Other solutions
- [react-meida](https://github.com/ReactTraining/react-media)
- [react-responsive](https://github.com/contra/react-responsive)
- ?
## Contributors
| [
Matt Phillips](http://mattphillips.io)
[💻](https://github.com/mattphillips/react-point-break/commits?author=mattphillips "Code") [💡](#example-mattphillips "Examples") [🤔](#ideas-mattphillips "Ideas, Planning, & Feedback") [🚇](#infra-mattphillips "Infrastructure (Hosting, Build-Tools, etc)") [⚠️](https://github.com/mattphillips/react-point-break/commits?author=mattphillips "Tests") |
| :---: |
## LICENSE
[MIT](/LICENSE)