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

License

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