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.

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>
)