Responsive Component

A responsive React component that takes a media query and renders its children only if the query matches. Handles changes if you resize your browser or flip your device...

Implementation

Works natively with Window.matchmedia api that takes a media query and returns a MediaQueryList object representing the parsed result. read more

| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|:----------:|:-------------:|:------:|:-------------:|:------:|:-------------:|
| Basic support | 9 | 6.0 (6.0) | 10 | 12.1 | 5.1 |

For older browsers, it falls back to Paul Irish's implementation of matchMedia: read more

$3

Try it out on codepen

All you need to do is wrap your content (React Components or jsx or html...) for the specific screen/device you are trying to target, and set the media query accordingly:

``javascript
import { ResponsiveComponent } from "react-responsive-component";
...







`

#### Optional props

You can pass a tag props to specify the tagname of the responsive component wrapper.

`javascript



This feature is not supported on TVs yet :(



``