🔱 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 to automatically track window width for you.
Play with live examples on CodeSandBox
You can follow me on twitter to stay connected in the news of react-bps and other projects of mine
How to use
Create your component and attach withBps HOC
// Slider.jsximport React from 'react'import withBps from 'react-bps' // create your component normallyconst Slider = arrows itemsPerSlide /* all slider comp logic */ Slider
And now you can use bps
prop additionally in your component
// App.jsximport React from 'react'import render from 'react-dom'import Slider from './Slider' const App = <Slider = = = > <div>Slide1</div> <div>Slide2</div> <div>Slide3</div> </Slider>
In this example your <Slider>
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:
const bps = 600: arrows: false itemsPerSlide: 1 <Slider = = => <div>Slide1</div> <div>Slide2</div> <div>Slide3</div></Slider>
Or this:
const bps = 600: arrows: false itemsPerSlide: 1 const sliderConfig = arrows: true itemsPerSlide: 1 <Slider = = => <div>Slide1</div> <div>Slide2</div> <div>Slide3</div></Slider>
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.
const bps = 1000: 700: a: 2 500: a: 2 b: false <Foo = = = /> // in width <= 1000px will reflect:<Foo = = /> // width <= 700px<Foo = = /> // width <= 500px<Foo = = />
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
Component
This way, the rules will be applied when width are higher or equals than setted breakpoint.
bps
Change prop You can chose the name you want as prop to override bps
by a propName
config
Component
<Foo = = = />
Install
Node Module
yarn add react-bps
npm i react-bps
UMD library
exposed as ReactBps
Contribute
You can help improving this project sending PRs and helping with issues.
Also you can ping me at Twitter