https://github.com/cool-hooks/react-viewport-hooks

📏 Get the real width & height of the window
https://github.com/cool-hooks/react-viewport-hooks

height hooks react sizes viewport width window

Last synced: 12 months ago
JSON representation

📏 Get the real width & height of the window

• Host: GitHub
• URL: https://github.com/cool-hooks/react-viewport-hooks
• Owner: cool-hooks
• License: mit
• Created: 2019-08-04T10:13:46.000Z (over 6 years ago)
• Default Branch: main
• Last Pushed: 2023-01-06T02:04:09.000Z (about 3 years ago)
• Last Synced: 2024-10-14T12:01:55.047Z (over 1 year ago)
• Topics: height, hooks, react, sizes, viewport, width, window
• Language: TypeScript
• Homepage:
• Size: 2.96 MB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 25
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

          
# [react-viewport-hooks](https://github.com/jb1905/react-viewport-hooks)

[![NPM version](https://img.shields.io/npm/v/react-viewport-hooks?style=flat-square)](https://www.npmjs.com/package/react-viewport-hooks)

[![NPM downloads](https://img.shields.io/npm/dm/react-viewport-hooks?style=flat-square)](https://www.npmjs.com/package/react-viewport-hooks)

[![NPM license](https://img.shields.io/npm/l/react-viewport-hooks?style=flat-square)](https://www.npmjs.com/package/react-viewport-hooks)

[![Codecov](https://img.shields.io/codecov/c/github/JB1905/react-viewport-hooks?style=flat-square)](https://codecov.io/gh/cool-hooks/react-viewport-hooks)

[![Travis](https://img.shields.io/travis/cool-hooks/react-viewport-hooks/master?style=flat-square)](https://travis-ci.org/cool-hooks/react-viewport-hooks)

[![Bundle size](https://img.shields.io/bundlephobia/min/react-viewport-hooks?style=flat-square)](https://bundlephobia.com/result?p=react-viewport-hooks)

## About

Get real viewport width & height

### Demo

Play with the library in CodeSandbox

- [hooks](https://codesandbox.io/s/hooks-demo-m8qxm)

- [HOC - Soon](#)

## How to Install

First, install the library in your project by npm:

```sh

$ npm install react-viewport-hooks

```

Or Yarn:

```sh

$ yarn add react-viewport-hooks

```

## Getting Started

#### Options

| Name               | Type    | Default     | Description                     |

| ------------------ | ------- | ----------- | ------------------------------- |

| **updateOnResize** | boolean | `true`      | Update sizes on window resize   |

| **defaultVW**      | number  | `undefined` | Fallback for default `vw` value |

| **defaultVH**      | number  | `undefined` | Fallback for default `vh` value |

#### Returned Values

| Name   | Type   | Description            |

| ------ | ------ | ---------------------- |

| **vw** | number | Window viewport width  |

| **vh** | number | Window viewport height |

#### Example

**`useViewport` hook:**

```js

import React from 'react';

import { useViewport } from 'react-viewport-hooks';

const App = () => {

  const { vw, vh } = useViewport(/* object with options (if needed) */);

  document.documentElement.style.setProperty('--vw', `${vw}px`);

  document.documentElement.style.setProperty('--vh', `${vh}px`);

  return 
Hello Viewport!
;

};


export default App;

```

**`withViewport` HOC:**

```js

import React from 'react';

import { withViewport } from 'react-viewport-hooks';

const App = ({ vw, vh }) => {

  document.documentElement.style.setProperty('--vw', `${vw}px`);

  document.documentElement.style.setProperty('--vh', `${vh}px`);

  return 
Hello Viewport!
;

};


export default withViewport(/* object with options (if needed) */)(App);

```

## License

This project is licensed under the MIT License © 2019-present Jakub Biesiada