MobX React MatchMedia

##### A React HOC with mediaqueries for responsive layout.

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


---

Install

``bash
npm i --save mobx-react-matchmedia
`

Usage

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!

Contributing

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!