MobX React MatchMedia
A React HOC with mediaqueries for responsive layout.
Install
npm i --save mobx-react-matchmediaUsage
Define mobx observable breakpoints
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
import { MatchMediaProvider } from 'mobx-react-matchmedia';
<MatchMediaProvider breakpoints={breakpoints}>
<Test breakpoints={breakpoints} />
</MatchMediaProvider>Pass the breakpoints as props to components and check if true/false
import { observer } from 'mobx-react';
const Test = observer(({ breakpoints }) => (
<div>
{breakpoints.sm ? 'YES' : 'NO'}
</div>
));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!