react-mediaswitch

    0.2.1 • Public • Published

    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.

    Install

    npm i react-mediaswitch

    DownloadsWeekly Downloads

    36

    Version

    0.2.1

    License

    MIT

    Last publish

    Collaborators

    • matthewwithanm
    • lettertwo