# react-with-media

> Watch media queries in React components

Latest version **2.0.0** (published 2020-12-22) · (Apache-2.0 OR MIT) license · 0 weekly downloads

## Install

```sh
npm install react-with-media
pnpm add react-with-media
yarn add react-with-media
bun add react-with-media
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2020-12-22 |
| First published | 2017-01-11 |
| Weekly downloads | 0 |
| License | (Apache-2.0 OR MIT) |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 37.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Rasmus Eneman |
| Maintainers | pajn |

## Links

- npm: https://www.npmjs.com/package/react-with-media
- Repository: git@github.com:Pajn/react-with-media
- Homepage: https://github.com/Pajn/react-with-media
- npm.io page: https://npm.io/package/react-with-media

## Recent versions

- 2.0.0 (latest) — 2020-12-22
- 1.1.3 — 2019-04-05
- 1.1.2 — 2019-03-05
- 1.1.1 — 2019-01-03
- 1.1.0 — 2019-01-03
- 1.0.2 — 2018-12-08
- 1.0.1 — 2018-12-08
- 1.0.0 — 2018-12-08
- 0.6.0 — 2018-11-25
- 0.5.0 — 2018-08-24
- 0.4.2 — 2018-03-10
- 0.4.1 — 2018-03-08
- 0.4.0 — 2018-03-08
- 0.3.0 — 2017-12-01
- 0.2.1 — 2017-07-22
- … 5 more at https://npm.io/package/react-with-media/versions

## README

# react-with-media

Watch media queries in React components.
A hook, A HOC and a render prop component are provided so that you can use whatever flavor you prefer.

Typescript typings are included.

## Install

```
yarn add react-with-media
npm install --save react-with-media
```

## Usage

### Hook

```typescript
const ShowMessage = () => {
  const matches = useMedia('(max-width: 500px)')

  return matches ? <span>Is mobile</span> : <span>Is desktop</span>
}
```

### HOC

```typescript
const ShowMessage = withMedia('(max-width: 500px)')(({matches}) =>
  matches ? <span>Is mobile</span> : <span>Is desktop</span>,
)
```

Optionally, the property name can be changed:

```typescript
const ShowMessage = withMedia('(max-width: 500px)', {name: 'isMobile'})(
  ({isMobile}) => (isMobile ? <span>Is mobile</span> : <span>Is desktop</span>),
)
```

### Render props

```typescript
const ShowMessage = () => (
  <WithMedia query="(max-width: 500px)">
    {matches => (matches ? <span>Is mobile</span> : <span>Is desktop</span>)}
  </WithMedia>
)
```

## License

react-with-media is dual-licensed under Apache 2.0 and MIT
terms.

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