React Mediaqueries

What is it about ?

React Mediaqueries helps you enforce media rules to render your components in React. It basically provides prebuilt media rules, a method to customize them, and a wrapper component to be used in your app. I also lately added a useMediaQuery hook which I'll tell how to use.

Getting started

You need to be using typescript for your project.

Let's first install the library.

yarn add @jsee_dev/react-mediaqueries

or

npm install @jsee_dev/react-mediaqueries

The ReactMediaQueries class

1. To be starting with, I would recommend importing it in a dedicated file in your project. Once it is done, you will have to instanciate the ReactMediaQueries class that has been imported, and get the wrapper component named MediaContext. Export it eventually so that it can be used anywhere in your application.

import ReactMediaQueries from "@jsee_dev/react-mediaqueries";

const { MediaContext } = new ReactMediaQueries();

export default MediaContext;

2. Use it where your need it. Note that it can take two props : orientation, and type. For now I'm not using any other query type so I didn't find useful to go further.

const MyApp: React.FC = () => (
  <MediaContext type="desktop-large">
    <p>Hello World !</p>
  </MediaContext>
);

3. (optional) You can customize the media queries. When you instanciate the library, just pass a configuration object as constructor. There you can specify which type you need to be tweaked, and then set min/max width for landscape and/or portrait orientation. Note that as soon as you make a modification, for instance on a min property, the associated max will be reset to null unless you give it a value as well.

import ReactMediaQueries from "@jsee_dev/react-mediaqueries";

const { MediaContext } = new ReactMediaQueries({
  smartphone_large: {
    portrait: {
      max: 414,
    },
  },
  desktop_small: {
    landscape: {
      min: 1024,
    },
  },
});

export default MediaContext;

And that's pretty much it !!

The useMediaQuery hook

1. This hook has been designed to make precise queries more convenient to use.
   Just import it in your file, call it at the higher level of your function component, and it will return 4 methods. Each one targets a specific query, and returns a boolean if the queries matches with updates on navigator resize : max-width for isWidthSmaller, min-width for isWidthLarger, max-height for isHeightSmaller, and min-height for isHeightLarger.

2. Then it can be used straight in your component TSX to condition the rendering of elements according to specific queries :-)

import { useMediaQuery } from "@jsee_dev/react-mediaqueries";

const MyComponent: React.FC = () => {
  const { isWidthLarger, isWidthSmaller, isHeightLarger, isHeightSmaller } = useMediaQuery();
  return (
    <div>
      <p>Hello World !</p>
      {isWidthLarger(720) && <p>Your device is probably not a smartphone !</p>}
    </div>
  );
};

3. You can also use the hook to check custom queries. Just set your query as an argument of the hook, and it will return true or false if the query has matched or not.

const isHoverNotSupported = useMediaQuery("(hover: none)");

Have fun and feel free to bring any improvements as you like !