react-responsive-simple

React components that are enabled according to viewport width. View on NPM

Usage

Run yarn add react-responsive-simple or npm install react-responsive-simple Import the components you want at the start of the files you need them in. Components available:

• <Mobile>: Renders on viewports <768px wide
• <MobileAndTablet>: Renders on viewports <992px wide
• <Tablet>: Renders on viewports >=768px and <992px wide
• <Desktop>: Renders on viewports >=992px wide
• <SmallDesktop>: Renders on viewports >=992px and <1200px wide
• <LargeDesktop>: Renders on viewports >=1200px wide

Maximally, we can define 3 different breakpoints, with 4 different views. Usually, <MobileAndTablet> and <Desktop> should be sufficient.

In addition, you can define your own breakpoints with <ResponsiveComponent> using the props min and max. If you would like to leave either undefined, you just leave the prop undefined. For example: <ResponsiveComponent min={1000}> becomes active at viewports of >=1000px wide, and <ResponsiveComponent max={1000}> is the corresponding component which becomes active at viewports of <1000px wide.

Example

import React from 'react';
import { render} from 'react-dom';
import { MobileAndTablet, Desktop } from 'react-responsive-simple';
const App = () => (
    [
    <MobileAndTablet>
       <div>ya yeet</div>
    </MobileAndTablet>,
    <Desktop>
        <div>na neet</div>
    </Desktop>
    ]
);
render(<App />, document.getElementById("root"));

Yields:

on screens above 992px wide and

on screens below 992px wide.