react-viewport-height

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

Usage no npm install needed!

<script type="module">
  import reactViewportHeight from 'https://cdn.skypack.dev/react-viewport-height';
</script>

README

react-viewport-height

npm downloads per week Minified size 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.

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 fund us on Patreon