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.
Instead of a normal css query, this will render or not your react component based on the size of the device.
npm install react-brk --save
yarn add react-brk
Desktop
minWidth: 992
Tablet
minWidth: 768, maxWidth: 991
Mobile
maxWidth: 767
Default
minWidth: 768
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>
)