# react-responsive-simple

> React components that are enabled according to viewport width

Latest version **0.1.2** (published 2019-05-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-responsive-simple
pnpm add react-responsive-simple
yarn add react-responsive-simple
bun add react-responsive-simple
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2019-05-05 |
| First published | 2019-04-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | kevinl94303 |
| Maintainers | kevinl94303 |

## Links

- npm: https://www.npmjs.com/package/react-responsive-simple
- Repository: https://github.com/kevinl94303/react-responsive-simple
- Homepage: https://github.com/kevinl94303/react-responsive-simple#readme
- Issues: https://github.com/kevinl94303/react-responsive-simple/issues
- npm.io page: https://npm.io/package/react-responsive-simple

## Recent versions

- 0.1.2 (latest) — 2019-05-05
- 0.1.1 — 2019-04-18
- 0.1.0 — 2019-04-17
- 0.0.2 — 2019-04-17
- 0.0.1 — 2019-04-17

## README

# react-responsive-simple
React components that are enabled according to viewport width. [View on NPM](https://www.npmjs.com/package/react-responsive-simple)

# 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:
<div><img src="https://github.com/kevinl94303/react-responsive-simple/blob/master/examples/screenshots/desktop-view.png?raw=true" width=50%/></div>
on screens above 992px wide and 
<div><img src="https://github.com/kevinl94303/react-responsive-simple/blob/master/examples/screenshots/mobile-view.png?raw=true" width=50%/></div>
on screens below 992px wide.

---
_Source: https://npm.io/package/react-responsive-simple · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._