react-responsive-simple
v0.1.2
Published
React components that are enabled according to viewport width
Downloads
55
Readme
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: