React Breakpoints (react-brk)

About

Easy, ready to use, well defined, react media queries taken from react-responsive and packed here.

This package lacks originality and does not introduce anything new.

It's just a wrapper of react-responsive made for convinience, just plug and play.

All the credit goes to the folks of react-responsive.

Why this

Instead of a normal css query, this will render or not your react component based on the size of the device.

Installation

npm install react-brk --save

yarn add react-brk

Breakpoints

Desktop minWidth: 992

Tablet minWidth: 768, maxWidth: 991

Mobile maxWidth: 767

Default minWidth: 768

Example

import { Desktop, Tablet, Mobile, Default } from 'react-brk'

  const app = () => (
    <div>
      <Desktop>
        <div>Desktop (width > 992px)</div>
      </Desktop>
      <Tablet>
        <div>Tablet (768 < width < 991)</div>
      </Tablet>
      <Mobile>
        <div>Mobile (width < 767)</div>
      </Mobile>
      <Default>
        <div>Default (width > 768)</div>
      </Default>
    </div>
  )