A React HOC with mediaqueries for responsive layout.
npm install mobx-react-matchmedia##### A React HOC with mediaqueries for responsive layout.


![Downloads]()
![npm]()
![node]()
![GitHub license]()

---
``bash`
npm i --save mobx-react-matchmedia
Define mobx observable breakpoints
`javascript
import { observable } from 'mobx';
const breakpoints = observable({
xs: '(max-width: 767px)',
su: '(min-width: 768px)',
sm: '(min-width: 768px) and (max-width: 991px)',
md: '(min-width: 992px) and (max-width: 1199px)',
mu: '(min-width: 992px)',
lg: '(min-width: 1200px)',
});
`
Pass the breakpoints to the MatchMediaProvider
`javascript
import { MatchMediaProvider } from 'mobx-react-matchmedia';
`
Pass the breakpoints as props to components and check if true/false
`javascript
import { observer } from 'mobx-react';
const Test = observer(({ breakpoints }) => (
Now resize the browser window to see the changes!
If you want to contribute to the development, do not hesitate to fork the repo and send pull requests.
And don't forget to star the repo, I will ensure more frequent updates! Thanks!