react-element-queries

React component designed to let you conditionally render pieces of UI based on a set of element (media) queries defined by you.

The best thing? It weights ~800 bytes gzipped (1.9KB minified) and its only dependency is react-resize-aware which weights only 1.2KB gzipped!

Installation

yarn add react-element-queries
# or
npm install --save react-element-queries

Usage

It's super easy to use:

import { ElementQuery, Matches } from 'react-element-queries';
 
const App = () =>
  <ElementQuery queries={{ sm: { maxWidth: 200 }, lg: { minWidth: 201 } }}>
    <Matches sm>I get rendered only when `sm` matches! 🐣</Matches>
    <Matches lg>Instead this is rendered only when `lg` matches 🐷</Matches>
  </ElementQuery>

Additionally, you can match multiple element queries to render a piece of UI in different conditions:

<Matches sm lg>🐣 and 🐷</Matches>

And if you need some more power, you can invert the behavior of a selector:

<Matches sm={false}>I match only when `sm` isn't matching</Matches>

Need more power?

You can enhance your component to provide it a matches property you can use to programmatically check for one or more element queries.
You simply have to provide a getRef property assigned as ref callback, make it render its children and use the matches property as follows:

import { makeElementQuery } from 'react-element-queries';
const App = ({ getRef, children, matches }) =>
  <div ref={getRef} style={{ color: matches('sm') ? 'yellow' : 'pink' }}>
    <Matches sm>🐣</Matches>
    {children}
  </div>
 
const EnhancedApp = makeElementQuery(
  App,
  { sm: { maxWidth: 200 }, lg: { minWidth: 201 } }
);

Docs

Queries

The queries property is an object with a list of properties of your choice, you can name them how you prefer, for instance, you could have sm or small or verySmallMatcher:

• { sm: { maxWidth: 10 } }
• { small: { maxWidth: 100, minWidth: 20 } }
• { verySmallMatcher: { maxWidth: 10, minHeight: 30 } }

Each property contains an object with one or more expressions.

So far, the supported expressions are: maxWidth, minWidth, maxHeight and minHeight.

<Matches /> component

Once you have defined your element queries, you can use the <Matches /> component to conditionally render a piece of UI.
Simply add to it one or more element queries names to tell it to display its content when at least one of the matches the given expressions.

matches property

When you enhance your component with makeElementQuery, your component will get access to the matches property.
This is a function you can call programmatically to perform any kind of operation with the result of the element queries you provide it.

matches('sm') // true if `sm` is matching
matches('sm', 'lg') // true if `sm` and/or `lg` are matching
matches({ sm: false }) // true when `sm` isn't matching
matches({ sm: false }, 'lg') // true when `sm` doesn't match and `lg` does

width and height properties

Since React Element Queries is based on React Resize Aware, you have access to the width and height properties once you have enhanced a component with makeElementQuery.

const Example = makeElementQuery(
  ({ getRef, children, width, height, matches }) =>
    <div ref={getRef}>{children}</div>,
  { sm: { maxWidth: 300 } }
);

Credits

Full credits to the original idea to @souporserious.

License

MIT License Copyright 2017+, Federico Zivolo