A react component to render different content on mobile and desktop

The problem

Split your components by device target and do responsive JavaScript!

This solution

A tiny react library, with no dependencies, that accepts a single breakpoint and uses window.matchMedia.

Installation

This module is distributed via npm, which is bundled with node, and should be installed as one of your project's dependencies:

npm install --save react-device-switch

This package also depends on react and prop-types. Please make sure you have those installed as well.

Usage

See the complete example.

react-device-switch uses the react Context API. You need to import the <DeviceSizeListener /> provider at the top level of your app, and the <DeviceSwitch /> consumer wherever you want to render content specific to a device size.

import React from "react";

import { DeviceSizeListener, DeviceSwitch } from "react-device-switch";

const BREAKPOINT = "min-width: 600px";

const App = () => (
  <DeviceSizeListener breakpoint={BREAKPOINT}>
    <DeviceSwitch mobileRender="Mobile!" desktopRender="Not a Mobile!" />
  </DeviceSizeListener>
);

export default App;

Alternatively, you can use <DeviceMobile /> and <DeviceDesktop />:

import React from "react";

import {
  DeviceSizeListener,
  DeviceMobile,
  DeviceDesktop
} from "react-device-switch";

const BREAKPOINT = "min-width: 600px";

const App = () => (
  <DeviceSizeListener breakpoint={BREAKPOINT}>
    <DeviceMobile>Mobile!</DeviceMobile>
    <DeviceDesktop>Not a Mobile!</DeviceDesktop>
  </DeviceSizeListener>
);

export default App;

Other Solutions

• react-responsive
• react-media
• react-responsive-decorator

LICENSE

MIT