# @cmdlucas/react-mediaquery

> A React helper library built upon semantic-ui to allow serving different components to different screens easily on server rendering or in browsers

Latest version **0.2.3** (published 2019-04-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @cmdlucas/react-mediaquery
pnpm add @cmdlucas/react-mediaquery
yarn add @cmdlucas/react-mediaquery
bun add @cmdlucas/react-mediaquery
```

## Health

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

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

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.3 |
| Published | 2019-04-22 |
| First published | 2019-04-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Caleb I. Lucas |
| Maintainers | cmdlucas |
| Keywords | semantic-ui, media query, responsive |

## Links

- npm: https://www.npmjs.com/package/@cmdlucas/react-mediaquery
- Repository: https://github.com/cmdlucas/react-mediaquery
- Homepage: https://github.com/cmdlucas/react-mediaquery#readme
- Issues: https://github.com/cmdlucas/react-mediaquery/issues
- npm.io page: https://npm.io/package/@cmdlucas/react-mediaquery

## Dependencies (3)

- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [mobile-detect](https://npm.io/package/mobile-detect.md) ^1.4.3
- [semantic-ui-react](https://npm.io/package/semantic-ui-react.md) ^0.86.0

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 0.2.3 (latest) — 2019-04-22

## README

## About
A React helper library built upon semantic-ui to make serving different components to different screens a breeze via server rendering or in browsers. Currently supports Mobile, Tablet and Desktop.

## Usage
This library is only compatible with React.

#### Install
```
npm install @cmdlucas/react-mediaquery
```

#### Example
Say we had a root DOM element we wanted to render different contents to according to screen width change
```
import React from 'react'
import ReactDOM from 'react-dom'
import { MqProvider, MediaQuery, 
    desktopScreen, tabletScreen, mobileScreen 
} from '@cmdlucas/react-mediaquery'

//It is required to use the Provider component as specified below 
//before calling MediaQuery anywhere down the Tree

const Menu = props => {
    return (
        <MqProvider>
            <MediaQuery type={desktopScreen}> 
                <h2> This is a desktop screen </h2>
            </MediaQuery>
            <MediaQuery type={tabletScreen}>
                <h3> This is a tablet screen </h3> 
            </MediaQuery>
            <MediaQuery type={mobileScreen}> 
                <h4> This is a mobile screen </h4> 
            </MediaQuery>
        </MqProvider>
    )
}

ReactDOM.render(<Menu />, document.getElementById("root"))

```

The Provider can be served an initial screen width either by supplying the user agent as seen below or by supplying a function that explicitly returns a specific number

```
//...
import { MqProvider, widthFactory } from 'react-mediaquery'
//...

const MenuA = props => {
    return (
        <MqProvider width={widthFactory(request.userAgent))}>
            //....
        </MqProvider>
    )
}

//This is also valid
const MenuB = props => {
    return (
        <MqProvider width={() => 576}>
            //....
        </MqProvider>
    )
}

//...
```

### Additional knowledge
You can supply other screen types to the MediaQuery component. Just import and use

#### Supported screen types
  - desktopScreen
  - mobileScreen
  - tabletScreen
  - mobileAndTablet
  - desktopAndTablet

## License
MIT

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