Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-viewport-height

dimazuien3.7kMIT1.2.2TypeScript support: included

A utility for React to set 100vh equal to the actual browser inner window height.

react, hook, viewport, scroll, vh, resize, window, screen, mobile

readme

react-viewport-height

npm Version npm downloads per week Minified size Open issues Open pull requests GitHub Stars CircleCI status Code scanning

A utility for React to set 100vh equal to the actual browser inner window height.

Since vh has troubles on mobile browsers (primarily because of the address bar), there are several tricks to fix it. This package implements the one from this article.

The solution for this was introduced in the CSS Values and Units Module Level 4 which is widely supported now. Instead of using this package, you can use the dvh unit if your project doesn't need to support older browsers. Read more about new units.

Usage

npm install react-viewport-height
// index.js
import useVH from 'react-viewport-height';
import './index.css';

const App = () => {
  useVH();

  return <div className="app" />;
};
/* index.css */
.app {
  min-height: calc(var(--vh, 1vh) * 100);
}

Read the documentation for more details. You can also play with a demo.

Support

If you like this package and want to support it, you can do it on Patreon

changelog

1.2.2 (2023-07-31)

Bug Fixes

  • change webpack config to build nodejs-compatible bundle (80a4596), closes #211

1.2.1 (2022-07-17)

Bug Fixes

  • validating server side properly and removing layoutEffect to not get a NextJS warning (91b8021)

1.2.0 (2022-04-03)

Bug Fixes

  • replace useEffect with useLayoutEffect (c9fd013)

Features

  • add support for react 18 (ce48cbc)

1.1.3 (2021-02-22)

Bug Fixes

  • include files definitions into package (eea4d8e)

1.1.2 (2021-02-22)

Bug Fixes

1.1.1 (2021-02-22)

Bug Fixes

1.1.0 (2020-12-27)

Features