react-hide-show-utils

React utility components for showing or hiding children components, based on media queries.

Based and inspired on what's suggested by the <HideAt> and <ShowAt> components shown in this block of code from this AirBnb Engineering's blog post.

How do they work?

These components use the browser's window.matchMedia API internally to be notified when a media query is active and hide or show their children accordingly.

Because of this:

• These components only work on the browser. Which means, for now, they do not support server-side rendering.
• Since it uses matchMedia, you might need a polyfill for support in legacy browsers (like IE9).
  • I suggest to consider using the polyfill.io service.

Usage:

Install

For now, it's not available through npm, but can still be easily installed:

package.json:

{
  "dependencies": {
    "react-hide-show-utils": "git+https://github.com/berbaquero/react-hide-show-utils.git#0.0.2"
  }
}

Note the #0.0.x at the end — refers to the version of the package you'll install.

Using the components

<HideAt>:

Un-mounts the children declared inside it, when the breakpoint becomes active. And logically, it renders it again when it becomes active again.

Note: before the component is even mounted for the first time, the breakpoint is checked, to determine whether it's active or not. Therefore, the component will not even be rendered initially, if the breakpoint is active then.

Example:

import react from 'react';
import { HideAt } from 'react-hide-show-utils';

<HideAt breakpoint="(min-width: 32em)">
 <Button
   text="I'm not rendered on wide viewports!"
 /> 
</HideAt>

<ShowAt>:

WIP.