# @bucky24/mobile-detect

> React component that can report the width of the window (to prevent needing nasty code)

Latest version **2.3.0** (published 2021-11-04) · ISC license · 0 weekly downloads

## Install

```sh
npm install @bucky24/mobile-detect
pnpm add @bucky24/mobile-detect
yarn add @bucky24/mobile-detect
bun add @bucky24/mobile-detect
```

## Health

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

Positive: no vulnerabilities; high maintenance score.

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

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.3.0 |
| Published | 2021-11-04 |
| First published | 2021-08-17 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Bucky24 |
| Maintainers | bucky24 |

## Links

- npm: https://www.npmjs.com/package/@bucky24/mobile-detect
- Repository: https://github.com/Bucky24/mobile-detect
- Homepage: https://github.com/Bucky24/mobile-detect#readme
- Issues: https://github.com/Bucky24/mobile-detect/issues
- npm.io page: https://npm.io/package/@bucky24/mobile-detect

## Recent versions

- 2.3.0 (latest) — 2021-11-04
- 2.2.2 — 2021-10-31
- 2.2.1 — 2021-10-31
- 2.2.0 — 2021-10-31
- 2.1.1 — 2021-10-31
- 2.1.0 — 2021-10-31
- 2.0.1 — 2021-08-17
- 2.0.0 — 2021-08-17

## README

# @bucky24/mobile-detect
React component that can selectively show content based on preset window widths.

Like most of my components, there might be something better out there-this one is pretty simple.

# Use

## SizeProvider

The first thing you need to do is wrap your content in the `SizeProvider`. It's recommended that you do this at the very top level of your app, however because this provider works off of the window size, it doesn't need to be there to function properly.

### Example:

```
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { SizeProvider } from '@bucky24/mobile-detect';

ReactDOM.render(<SizeProvider><App /></SizeProvider>, document.getElementById('root'));
```

*NOTE* your index template will also need the meta viewport set, or it will constantly report a width of 980.

```
<meta name="viewport" content="width=device-width, initial-scale=1">
```

If you want to change the breakpoints where tablet and mobile start, you can do that by passing `mobileSize` and `tabletSize` into `SizeProvider`. The default value for `mobileSize` is 450 and `tabletSize` is 900

## SizeContext

The SizeContext provides information on window width as well as computed data.

| Field | Description |
|--|--|
| width | The width of the window |
| mobileSize | The value being used as the breakpoint for mobile |
| tabletSize | The value being used as the breakpoint for tablet |
| isMobile | Boolean, true if mobile contents should be displayed |
| isTablet | Boolean, true if tablet contents should be displayed |
| isDesktop | Boolean, true if desktop contents should be displayed |

### Example:

```
import React, { useContext } from 'react';
import { SizeContext } from '@buck24/mobile-detect';

export default function App() {
    const { isMobile, isTablet, isDesktop } = useContext(SizeContext);
    return (<div className={styles.appRoot}>
		{isDesktop && (
            This displays when in desktop view
        )}
        {isTablet && (
            This displays when in tablet view
        )}
        {isMobile && (
            This displays when in mobile view
        )}
	</div>);
}
```

## Helper Components

There are four main components exported by the module:
* Mobile - only displays its contents when the window width is <= mobileSize
* Tablet - only displays its contents when the window width is above mobileSize but <= tabletSize
* Desktop - only displays its contents when the window width is above tabletSize
* DesktopTablet - only displays its contents when either Tablet or Desktop would display

### Example:

```
import React from 'react';
import { Mobile, Desktop, Tablet } from '@bucky24/mobile-detect';

import styles from './styles.css';

export default function App() {
    
	return (<div className={styles.appRoot}>
		<Desktop>
            This displays when in desktop view
        </Desktop>
        <Tablet>
            This displays when in tablet view
        </Tablet>
        <Mobile>
            This displays when in mobile view
        </Mobile>
	</div>);
}
```

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