react-mediaswitch

Choose your DOM based on media queries

<MediaSwitch>
  <MediaCase media="screen and (max-width: 400px)">
    <div>So tiny!</div>
  </MediaCase>
  <MediaCase media="screen and (max-width: 800px)" default={true}>
    <div>A little bigger</div>
  </MediaCase>
  <MediaCase media="screen and (min-width: 800px)">
    <div>So big!</div>
  </MediaCase>
</MediaSwitch>

Mark a default case for environments that don't support matchMedia:

<MediaCase ... default={true}>
  ...
</MediaCase>

Using server rendering? Mark a case as "initial":

<MediaCase ... initial={true}>
  ...
</MediaCase>

You can also provide a handler to cases instead of children:

<MediaSwitch>
  <MediaCase media="screen and (max-width: 400px)" handler={SmallThing} />
  <MediaCase media="screen and (max-width: 800px)" handler={MediumThing} default={true} />
  <MediaCase media="screen and (min-width: 800px)" handler={BigThing} />
</MediaSwitch>

Handlers can be React classes or any function that returns a component.