A react component to render different content on mobile and desktop. Uses window.matchMedia API.
npm install react-device-switch[![size][size-badge]][unpkg-dist]
[![gzip size][gzip-badge]][unpkg-dist]
[![module formats: umd, cjs, and es][module-formats-badge]][unpkg-dist]
[![Watch on GitHub][github-watch-badge]][github-watch]
[![Star on GitHub][github-star-badge]][github-star]
[![Tweet][twitter-badge]][twitter]
Split your components by device target and do responsive JavaScript!
A tiny react library, with no dependencies, that accepts a single breakpoint and uses window.matchMedia.
This module is distributed via [npm][npm], which is bundled with [node][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.
See the complete example.
react-device-switch uses the react Context API. You need to import the provider at the top level of your app, and the consumer wherever you want to render content specific to a device size.
`jsx
import React from "react";
import { DeviceSizeListener, DeviceSwitch } from "react-device-switch";
const BREAKPOINT = "min-width: 600px";
const App = () => (
);
export default App;
`
Alternatively, you can use and :
`jsx
import React from "react";
import {
DeviceSizeListener,
DeviceMobile,
DeviceDesktop
} from "react-device-switch";
const BREAKPOINT = "min-width: 600px";
const App = () => (
);
export default App;
`
- react-responsive
- react-media
- react-responsive-decorator`
MIT
[npm]: https://www.npmjs.com/
[node]: https://nodejs.org
[build-badge]: https://img.shields.io/travis/damusnet/react-device-switch.svg?style=plastic
[build]: https://travis-ci.org/damusnet/react-device-switch
[coverage-badge]: https://img.shields.io/codecov/c/github/damusnet/react-device-switch.svg?style=plastic
[coverage]: https://codecov.io/github/damusnet/react-device-switch
[greenkeeper-badge]: https://badges.greenkeeper.io/damusnet/react-device-switch.svg
[version-badge]: https://img.shields.io/npm/v/react-device-switch.svg?style=plastic
[package]: https://www.npmjs.com/package/react-device-switch
[downloads-badge]: https://img.shields.io/npm/dm/react-device-switch.svg?style=plastic
[npmcharts]: http://npmcharts.com/compare/react-device-switch
[license-badge]: https://img.shields.io/npm/l/react-device-switch.svg?style=plastic
[license]: https://github.com/damusnet/react-device-switch/blob/master/LICENSE
[github-watch-badge]: https://img.shields.io/github/watchers/damusnet/react-device-switch.svg?style=social
[github-watch]: https://github.com/damusnet/react-device-switch/watchers
[github-star-badge]: https://img.shields.io/github/stars/damusnet/react-device-switch.svg?style=social
[github-star]: https://github.com/damusnet/react-device-switch/stargazers
[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20react-device-switch!%20https://github.com/damusnet/react-device-switch%20%F0%9F%91%8D
[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/damusnet/react-device-switch.svg?style=social
[gzip-badge]: http://img.badgesize.io/https://unpkg.com/react-device-switch/dist/react-device-switch.umd.min.js?compression=gzip&label=gzip%20size&style=plastic
[size-badge]: http://img.badgesize.io/https://unpkg.com/react-device-switch/dist/react-device-switch.umd.min.js?label=size&style=plastic
[unpkg-dist]: https://unpkg.com/react-device-switch/dist/
[module-formats-badge]: https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20es-green.svg?style=plastic