React-viewport-hooks NPM

react-viewport-hooks

About

Get real viewport width & height

How to Install

First, install the library in your project by npm:

$ npm install react-viewport-hooks

Or Yarn:

$ 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:

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 <h1>Hello Viewport!</h1>;
};

export default App;

withViewport HOC:

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 <h1>Hello Viewport!</h1>;
};

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