react-viewport-hooks


About

Get real viewport width & height

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