Skip to content

cool-hooks/react-viewport-hooks

Folders and files

NameName
Last commit message
Last commit date

Latest commit

May 25, 2020
2bda80a Β· May 25, 2020

History

71 Commits
May 25, 2020
May 25, 2020
Mar 22, 2020
May 25, 2020
Feb 20, 2020
Aug 4, 2019
Feb 20, 2020
May 25, 2020
Aug 4, 2019
May 25, 2020
May 25, 2020
Mar 22, 2020
May 25, 2020
May 25, 2020

Repository files navigation

NPM version NPM downloads

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