renatorib / react-bps

:trident: Create breakpoints to your component props

🔱 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.

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.

Change prop bps

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