Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/renatorib/react-bps
:trident: Create breakpoints to your component props
https://github.com/renatorib/react-bps
bps breakpoints higher-order-component hoc props react react-component reactjs responsive
Last synced: about 1 month ago
JSON representation
:trident: Create breakpoints to your component props
- Host: GitHub
- URL: https://github.com/renatorib/react-bps
- Owner: renatorib
- Created: 2017-09-21T17:53:59.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2017-09-23T01:08:58.000Z (about 7 years ago)
- Last Synced: 2024-09-14T22:28:35.012Z (2 months ago)
- Topics: bps, breakpoints, higher-order-component, hoc, props, react, react-component, reactjs, responsive
- Language: JavaScript
- Size: 35.2 KB
- Stars: 63
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/react-bps)
[](https://www.npmjs.com/package/react-bps)
[](https://github.com/renatorib/react-bps/issues)
[](https://github.com/renatorib/react-bps/stargazers)
[](https://twitter.com/intent/tweet?url=https://github.com/renatorib/react-bps)
:trident: Create breakpoints to your component props
---
**React Bps** – *where bps means **breakpoints*** – is a small and zero-config HOC that enable you to pass breakpoints to your component based on window width size.
It uses [react-sizes](http://github.com/renatorib/react-sizes) to automatically track window width for you.
React Bps was heavily inspired by Ken Wheeler's [Slick](http://kenwheeler.github.io/slick/) "responsive display" pattern.
[Play with live examples on CodeSandBox](https://codesandbox.io/s/zk04n4m2jp)
> *You can [follow me on twitter](http://twitter.com/renatorib_) to stay connected in the news of react-bps and other projects of mine*
---
# How to use
Create your component and attach **withBps** HOC
```jsx
// Slider.jsx
import React from 'react'
import { withBps } from 'react-bps'
// create your component normally
const Slider = ({ arrows, itemsPerSlide }) => (
/* all slider comp logic */
)
export default withBps()(Slider)
```
And now you can use `bps` prop additionally in your component
```jsx
// App.jsx
import React from 'react'
import { render } from 'react-dom'
import Slider from './Slider'
const App = () => (
Slide1
Slide2
Slide3
)
render(, document.getElementById('root))
```
In this example your `` will normally receive this props: `{ arrow: true, itemsPerSlide: 3 }`
But if *window width is smaller (or equal) than **600***, so it will reflect this props: `{ arrow: false, itemsPerSlide: 1 }`
by **overwriting**.
In order to facilitate you can do something like this:
```jsx
const bps = {
600: {
arrows: false,
itemsPerSlide: 1,
}
}
Slide1
Slide2
Slide3
```
Or this:
```jsx
const bps = {
600: {
arrows: false,
itemsPerSlide: 1,
}
}
const sliderConfig = {
arrows: true,
itemsPerSlide: 1,
bps,
}
Slide1
Slide2
Slide3
```
In fact it's up to you.
# Creating breakpoints
You can create as many breakpoints as you want, just pass the width and the config.
The config will be overwritted into your props, so if you pass a empty object this
will not change existing props.
```jsx
const bps = {
1000: {},
700: { a: 2 },
500: { a: 2, b: false },
}
// in width <= 1000px will reflect:
// width <= 700px
// width <= 500px
```
# Mobile first strategy
By default, the rules are applied by desktop first strategy.
If you want to use mobile first strategy, you can pass by a configuration
```js
withBps({ mobileFirst: true })(Component)
```
This way, the rules will be applied when width are higher or equals than setted breakpoint.
# Change prop `bps`
You can chose the name you want as prop to override `bps` by a `propName` config
```js
withBps({ propName: 'breakpoints' })(Component)
```
```jsx
```
# Install
### Node Module
```
yarn add react-bps
```
```
npm i react-bps
```
### UMD library
```html
```
exposed as `ReactBps`
# Contribute
You can help improving this project sending PRs and helping with issues.
Also you can ping me at [Twitter](http://twitter.com/renatorib_)