https://github.com/CharlesStover/use-dimensions

A React hook for the React Native Dimensions API.
https://github.com/CharlesStover/use-dimensions

npm npmjs react react-hook react-hooks react-native reactjs reactnative typescript

Last synced: about 1 month ago
JSON representation

A React hook for the React Native Dimensions API.

• Host: GitHub
• URL: https://github.com/CharlesStover/use-dimensions
• Owner: CharlesStover
• License: other
• Archived: true
• Created: 2018-11-07T20:54:24.000Z (about 6 years ago)
• Default Branch: main
• Last Pushed: 2022-11-28T05:03:04.000Z (about 2 years ago)
• Last Synced: 2024-10-02T13:05:00.462Z (2 months ago)
• Topics: npm, npmjs, react, react-hook, react-hooks, react-native, reactjs, reactnative, typescript
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/use-dimensions
• Size: 944 KB
• Stars: 32
• Watchers: 4
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-react-hooks - `use-dimensions`
• awesome-react-hooks-cn - `use-dimensions`
• awesome-react-hooks - `use-dimensions`
• awesome-react-hooks - `use-dimensions`

README

        
# useDimensions

[![version](https://img.shields.io/npm/v/use-dimensions.svg)](https://www.npmjs.com/package/use-dimensions)

[![minzipped size](https://img.shields.io/bundlephobia/minzip/use-dimensions.svg)](https://www.npmjs.com/package/use-dimensions)

[![downloads](https://img.shields.io/npm/dt/use-dimensions.svg)](https://www.npmjs.com/package/use-dimensions)

`useDimensions` is a React hook for the React Native Dimensions API.

## Install

* `npm install use-dimensions --save`, or

* `yarn add use-dimensions`

## Use

### Screen and Window Dimensions

To get both screen and window dimensions, use the default export.

```js

import useDimensions from 'use-dimensions';

export default function MyComponent() {

  const { screen, window } = useDimensions();

  return (

    

      a {screen.width}x{screen.height} screen{' '}

      inside a{' '}

      {window.width}x{window.height} window

    

  );

}

```

### Screen Dimensions Only

To get the screen dimensions only, use the `useScreenDimensions` export.

```js

import { useScreenDimensions } from 'use-dimensions';

export default function MyComponent() {

  const { height, width } = useScreenDimensions();

  return {width}x{height};

}

```

### Window Dimensions Only

To get the window dimensions only, use the `useWindowDimensions` export.

```js

import { useWindowDimensions } from 'use-dimensions';

export default function MyComponent() {

  const { height, width } = useWindowDimensions();

  return {width}x{height};

}

```