This package has been deprecated

Author message:

remove

react-matchquery

Library to control the design of your application using media queries 🔥

Install

Via NPM:

npm install react-matchquery --save

Via Yarn:

yarn add react-matchquery

Usage

MediaQueryProvider

import { MediaQueryProvider } from 'react-matchquery';

const queries = {
    isMobile: 'screen and (max-width: 767px)',
    isTablet: 'screen and (min-width: 768px) and (max-width: 1023px)',
    isDekstopS: 'screen and (min-width: 1024px) and (max-width: 1365px)',
    isDekstop: 'screen and (min-width: 1366px) and (max-width: 1440px)',
    isDekstopL: 'screen and (min-width: 1441px)'
}

export const App = (props) =>  (
  <MediaQueryProvider queries={queries}>
    <MyApp />
  </MediaQueryProvider>
);

MediaQueryConsumer

import { MediaQueryConsumer } from 'react-matchquery';

export const MyComponent = () => (
  <MediaQueryConsumer>
    {({ isDekstopS, isDekstop, isDekstopL, isTablet, isMobile }) => (
      <>
        {(isDekstopS || isDekstop || isDekstopL) && <p>Desktop View</p>}
        {(isTablet || isMobile) && <p>Tablet and Mobile View</p>}
      </>
    )}
  </MediaQueryConsumer>
);

Server Side Rendering

You can pass in media features from your server, all supported values can be found here.

Usage (matches mobile screen during SSR):

const App = (props) => {
  const values = {
    width: 300,
    type: 'screen',
  };

  return (
    <MediaQueryProvider values={values}>
      <MyApp />
    </MediaQueryProvider>
  );
};

React 16 ReactDOM.hydrate

It's very important to realise a server client mismatch is dangerous when using hydrate in React 16, ReactDOM.hydrate can cause very strange html on the client if there is a mismatch. To mitigate this we use the two-pass rendering technique mentioned in the React docs. We render on the client in the first pass using values with css-mediaquery used on the server, then we use the matchMedia to get it's actual dimensions and render again if it causes different query results. This means there should be no React server/client mismatch warning in your console and you can safely use hydrate. As a result of above, if you are server side rendering and using ReactDOM.hydrate you must supply MediaQueryProvider a values prop.