Nocturnal Pumpkin Maelstrom

    react-bps

    0.0.4 • Public • Published

    react-bps

    npm npm GitHub issues GitHub stars Twitter

    🔱 Create breakpoints to your component props


    React Bpswhere 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.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,
    }
     
    <Slider arrows={true} itemsPerSlide={3} bps={bps}>
      <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

    Install

    npm i react-bps

    DownloadsWeekly Downloads

    5

    Version

    0.0.4

    License

    MIT

    Last publish

    Collaborators

    • renatorib