Remedia

A remedy for media queries in React.

Remedia provides an API for Media Queries that treats JavaScript and React as a first class citizens with CSS. Rather than being defined as strings, Media Queries are defined as MediaQuery objects that can later be combined to make new Media Queries or who's values can be referenced in other contexts.

Remedia is written in TypeScript providing a type safe API and a great developer experience. It makes use of generics and literal types to make it easy to inspect a query's underlying data just by looking at its type information:

Installation

npm install remedia

Usage

1. Create a MediaQuery instance

import remedia from 'remedia';

const phoneLargeMin = remedia({ minWidth: 321 });

2. Use a MediaQuery in CSS

const style = css`
  font-size: 12px;

  @media ${phoneLargeMin} {
    font-size: 16px;
  }
`;

MediaQuery instances become actual media query strings when they are interpolated, which calls the toString() method underneath

3. Subscribe to a MediaQuery in React with the use method hook

const MyComponent: React.FC = () => {
  // `use` method defaults to false
  const matchesPhoneLargeMin = phoneLargeMin.use()
  // but you can pass true to default to true
  const matchesPhoneLargeMax = phoneLargeMin.use(true)
  ...
}

4. Build new queries from existing ones

const tabletLandscapeMin = remedia({ minWidth: 769 });
const tabletLandscapeMax = remedia({ maxWidth: 1024 });

const tabletLandscapeRange = remedia({
  ...tabletLandscapeMin,
  ...tabletLandscapeMax,
});

5. "OR" multiple queries together

If you need to OR multiple queries together, just pass multiple queries into remedia.

/* small phone portrait: *-320 */
export const phoneSmallMax = remedia({ maxWidth: 320 });

/* tablet portrait: 569–768 */
export const tabletMin = remedia({ minWidth: 569 });
export const tabletMax = remedia({ maxWidth: 768 });

// compound query using OR and built from previous queries: 0-114 or 569-768
export const narrowMainContent = remedia(phoneSmallMax, {
  ...tabletMax,
  ...tabletMin,
});

Prior art and attribution

In the process of building this library I was inspired by and borrowed ideas & code from @jaredpalmer's useMedia hook.

This library also includes a forked and modified version of the great json2mq library by @kiran.