Package to include in your react app. This sets css variables (--app-height and --app-width) to the inner height and width of the window to get accurate readings of the viewport.
npm install react-css-sizesThis package helps you inject css variables that are equal to the viewport height and width into the body tag.
- Any browser that support _CSS Style Declaration setProperty_ See here
- Anything that supports css variables.
To install the package:
``bash`
npm install react-css-sizes --save
To use package in your component of choice include this at the top.:
`javascript`
import ReactCssSizes from 'react-css-sizes';
Include the component in your layout file or component of choice add this in your render function:
`javascript`
class MyClass {
render() {
return (
);
}
}
This will append two css variables on the body tag and will update on resizing the window.
--app-height and --app-width
In your CSS you will be able to use the following:
`css``
.selector {
height: var(--app-height, 100vh);
}
Sometimes you just need to use javascript to get a more accurate reading of the viewport height.
Some browsers and mobile browsers read 100vh larger than the actual visible viewport (due to browser bar and footer), this will help cover those.