MobX React MatchMedia

A React HOC with mediaqueries for responsive layout.

Install

npm i --save mobx-react-matchmedia

Usage

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!