# react-native-use-dimensions

> This Node.js package is a collection of React hooks for using the dimensions of the screen, window, or both.

Latest version **1.3.4** (published 2020-07-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-use-dimensions
pnpm add react-native-use-dimensions
yarn add react-native-use-dimensions
bun add react-native-use-dimensions
```

## Health

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

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

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.4 |
| Published | 2020-07-17 |
| First published | 2020-01-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=6 |
| Dependencies | 0 |
| Unpacked size | 8.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | Dawson Booth |
| Maintainers | dawsonbooth |
| Keywords | frontend, react, react-native, expo, typescript, hooks, dimensions, ios, android |

## Links

- npm: https://www.npmjs.com/package/react-native-use-dimensions
- Repository: https://github.com/dawsonbooth/react-native-use-dimensions
- npm.io page: https://npm.io/package/react-native-use-dimensions

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.3.4 (latest) — 2020-07-17
- 1.3.3 — 2020-07-05
- 1.3.2 — 2020-06-18
- 1.3.1 — 2020-04-30
- 1.3.0 — 2020-02-25
- 1.2.5 — 2020-02-03
- 1.2.4 — 2020-01-31
- 1.2.3 — 2020-01-31
- 1.2.2 — 2020-01-31
- 1.2.1 — 2020-01-31
- 1.2.0 — 2020-01-31
- 1.1.2 — 2020-01-23
- 1.1.1 — 2020-01-22
- 1.1.0 — 2020-01-22
- 1.0.7 — 2020-01-22
- … 7 more at https://npm.io/package/react-native-use-dimensions/versions

## README

<div align="center">
<img src="assets/img/logo.png" height=200 width=400 alt="react-native-use-dimensions">

[![npm version](http://img.shields.io/npm/v/react-native-use-dimensions.svg?style=flat)](https://npmjs.org/package/react-native-use-dimensions)
[![downloads](http://img.shields.io/npm/dt/react-native-use-dimensions.svg?style=flat)](https://npmjs.org/package/react-native-use-dimensions)
[![build status](https://github.com/dawsonbooth/react-native-use-dimensions/workflows/build/badge.svg)](https://github.com/dawsonbooth/react-native-use-dimensions/actions?workflow=build)
[![license](https://img.shields.io/npm/l/react-native-use-dimensions.svg?style=flat)](https://github.com/dawsonbooth/react-native-use-dimensions/blob/master/LICENSE)

</div>

## Description

This Node.js package is a collection of React hooks for using the dimensions of the screen, window, or both.

## Installation

With [Node.js](https://nodejs.org/en/download/) installed, simply run the following command to add the package to your project.

```bash
npm install react-native-use-dimensions
```

## Usage

Check out the examples below or [check out the docs](https://dawsonbooth.github.io/react-native-use-dimensions/).

The package comes with three hooks:

1. **useScreenDimensions** - screen dimensions
2. **useWindowDimensions** - window dimensions, which can be [separate from screen on Android](https://stackoverflow.com/a/44979327/11960129)
3. **useDimensions** - screen and window dimensions

```js
import React from "react";
import { Text } from "react-native";
import useDimensions, {
  useScreenDimensions,
  useWindowDimensions
} from "react-native-use-dimensions";

const ScreenDimensions = () => {
  const { height, width } = useScreenDimensions();
  const isLandscape = width > height;
  return (
    <Text>
      {width}x{height}
      Orientation: {isLandscape ? "Landscape" : "Portrait"}
    </Text>
  );
};

const WindowDimensions = () => {
  const { height, width } = useWindowDimensions();
  const isLandscape = width > height;
  return (
    <Text>
      {width}x{height}
      Orientation: {isLandscape ? "Landscape" : "Portrait"}
    </Text>
  );
};

const BothDimensions = () => {
  const { screen, window } = useDimensions();
  return (
    <Text>
      Screen: {screen.width}x{screen.height}
      Window: {window.width}x{window.height}
    </Text>
  );
};
```

## License

This software is released under the terms of [MIT license](LICENSE).

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