npm i --save mobx-react-matchmediaDefine 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!
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!