# react-native-dimensions-hooks

> Hooks to wrap the React Native Dimensions API for React Native and React Native Web

Latest version **1.0.0** (published 2020-06-06) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 40/100 (D)** — status: abandoned.

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

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-06-06 |
| First published | 2019-03-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 13.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Ryan Jerue |
| Maintainers | rjerue |
| Keywords | react, react-native, react-native-web, hooks, hook, dimensions, dimension |

## Links

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

## 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.0.0 (latest) — 2020-06-06
- 0.1.2 — 2019-12-04
- 0.1.1 — 2019-03-13

## README

# React Native Dimensions Hooks

Hooks to wrap the React Native Dimensions API for Native and React Native Web.

They use listeners under the hood, so they will update on window and screen size changes.

[Demo](https://rjerue.github.io/react-native-dimensions-hooks)

## Usage:

```jsx
import React from 'react';
import useDimensions from 'react-native-dimensions-hooks';

export default () => {
  const { window, screen } = useDimensions();
  return (
    <div>
      <div>Window {JSON.stringify(window)}</div>
      <div>Screen {JSON.stringify(screen)}</div>
    </div>
  );
};
```

Window or screen may be also imported individually by `useWindowDimensions` or `useScreenDimension`.

```jsx
import {
  useWindowDimensions,
  useScreenDimension,
} from 'react-native-dimensions-hooks';

...

const useScreenDimension = useScreenDimension();
const windowDimensions = useWindowDimensions();
```

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