Awesome Open Source
Awesome Open Source

react-bps

npm npm GitHub issues GitHub stars Twitter

🔱 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


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (68,779) 
react (5,308) 
reactjs (1,057) 
responsive (213) 
react-component (201) 
hoc (29) 
props (26) 
higher-order-component (21) 

Find Open Source By Browsing 7,000 Topics Across 59 Categories

Advertising 📦 10
All Projects
Application Programming Interfaces 📦 124
Applications 📦 192
Artificial Intelligence 📦 78
Blockchain 📦 73
Build Tools 📦 113
Cloud Computing 📦 80
Code Quality 📦 28
Collaboration 📦 32
Command Line Interface 📦 49
Community 📦 83
Companies 📦 60
Compilers 📦 63
Computer Science 📦 80
Configuration Management 📦 42
Content Management 📦 175
Control Flow 📦 213
Data Formats 📦 78
Data Processing 📦 276
Data Storage 📦 135
Economics 📦 64
Frameworks 📦 215
Games 📦 129
Graphics 📦 110
Hardware 📦 152
Integrated Development Environments 📦 49
Learning Resources 📦 166
Legal 📦 29
Libraries 📦 129
Lists Of Projects 📦 22
Machine Learning 📦 347
Mapping 📦 64
Marketing 📦 15
Mathematics 📦 55
Media 📦 239
Messaging 📦 98
Networking 📦 315
Operating Systems 📦 89
Operations 📦 121
Package Managers 📦 55
Programming Languages 📦 245
Runtime Environments 📦 100
Science 📦 42
Security 📦 396
Social Media 📦 27
Software Architecture 📦 72
Software Development 📦 72
Software Performance 📦 58
Software Quality 📦 133
Text Editors 📦 49
Text Processing 📦 136
User Interface 📦 330
User Interface Components 📦 514
Version Control 📦 30
Virtualization 📦 71
Web Browsers 📦 42
Web Servers 📦 26
Web User Interface 📦 210