rm

react-mediaswitch

Choose your DOM based on media queries

Showing:

Popularity

Downloads/wk

32

GitHub Stars

59

Maintenance

Last Commit

7yrs ago

Contributors

0

Package

Dependencies

1

Size (min+gzip)

1.2KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100