react-viewport-hooks

About

Get real viewport width & height

Demo

Play with the library in CodeSandbox

• hooks
• HOC - Soon

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);

License

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