https://github.com/dimazuien/react-viewport-height

A utility for React to set 100vh equal to the actual browser inner window height.
https://github.com/dimazuien/react-viewport-height

hook mobile react resize screen scroll vh viewport window

Last synced: 5 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/dimazuien/react-viewport-height
• Owner: dimazuien
• License: mit
• Created: 2020-09-01T11:49:02.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2025-02-02T20:32:30.000Z (8 days ago)
• Last Synced: 2025-02-02T21:25:39.434Z (8 days ago)
• Topics: hook, mobile, react, resize, screen, scroll, vh, viewport, window
• Language: TypeScript
• Homepage: https://codesandbox.io/s/react-viewport-height-90o4j
• Size: 21.3 MB
• Stars: 9
• Watchers: 2
• Forks: 3
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Security: SECURITY.md
  • Support: SUPPORT.md

Awesome Lists containing this project

README

        
# react-viewport-height

[![npm Version](https://img.shields.io/npm/v/react-viewport-height.svg)](https://www.npmjs.com/package/react-viewport-height)

![npm downloads per week](https://img.shields.io/npm/dw/react-viewport-height)

![Minified size](https://img.shields.io/bundlephobia/min/react-viewport-height)

[![Open issues](https://img.shields.io/github/issues-raw/dimazuien/react-viewport-height)](https://github.com/dimazuien/react-viewport-height/issues)

[![Open pull requests](https://img.shields.io/github/issues-pr-raw/dimazuien/react-viewport-height)](https://github.com/dimazuien/react-viewport-height/pulls)

[![GitHub Stars](https://img.shields.io/github/stars/dimazuien/react-viewport-height)](https://github.com/dimazuien/react-viewport-height/stargazers)

![CircleCI status](https://img.shields.io/circleci/build/github/dimazuien/react-viewport-height/main?label=circleci)

![Code scanning](https://img.shields.io/github/actions/workflow/status/dimazuien/react-viewport-height/codeql-analysis.yml?branch=main)

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](https://css-tricks.com/the-trick-to-viewport-units-on-mobile/).

_The solution for this was introduced in the [CSS Values and Units Module Level 4](https://www.w3.org/TR/css-values-4) which is [widely supported now](https://caniuse.com/viewport-unit-variants). 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.](https://web.dev/viewport-units/)_

## Usage

```shell

npm install react-viewport-height

```

```jsx

// index.js

import useVH from 'react-viewport-height';

import './index.css';

const App = () => {

  useVH();

  return 
;

};

```


```css

/* index.css */

.app {

  min-height: calc(var(--vh, 1vh) * 100);

}

```

Read [the documentation](https://github.com/dimazuien/react-viewport-height/blob/main/docs/index.md) for more details. You can also play with a [demo](https://codesandbox.io/s/react-viewport-height-90o4j).

## Support

If you like this package and want to support it, you can do it on [Patreon](https://www.patreon.com/dimazuien)