React Bps 🔱为您的组件props创建断点
React Bps 🔱为您的组件props创建断点
JavaScript 其它杂项
共64Star
详细介绍
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.
React Bps was heavily inspired by Ken Wheeler's Slick "responsive display" pattern.
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.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
// App.jsx
import React from 'react'
import { render } from 'react-dom'
import Slider from './Slider'
const App = () => (
<Slider
arrows={true} itemsPerSlide={3}
bps={{ 600: { arrows: false, itemsPerSlide: 1 } }}
>
<div>Slide1</div>
<div>Slide2</div>
<div>Slide3</div>
</Slider>
)
render(<App />, document.getElementById('root))
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 arrows={true} itemsPerSlide={3} bps={bps}>
<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,
bps,
}
<Slider {...sliderConfg}>
<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 a={1} b={2} bps={bps} />
// in width <= 1000px will reflect:
<Foo a={1} b={2} />
// width <= 700px
<Foo a={2} b={2} />
// width <= 500px
<Foo a={2} b={false} />
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
withBps({ mobileFirst: true })(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
withBps({ propName: 'breakpoints' })(Component)
<Foo a={1} b={2} breakpoints={{ /* my breakpoints rules */ }} />
Install
Node Module
yarn add react-bps
npm i react-bps
UMD library
<script src="https://unpkg.com/react-bps/dist/react-bps.min.js"></script>
exposed as ReactBps
Contribute
You can help improving this project sending PRs and helping with issues.
Also you can ping me at Twitter