npm install get-viewport-sizes
To use, call getSizes()
at the top of your entry file to populate --vh and --vw
import { getSizes } from 'get-viewport-sizes';
getSizes(200); // where 200 (default) is the timeout for debounce
You may then use the var in css like this
main {
height: var(--vh * 0.8) //80% of vh
}
You may also use React hook to get the updated with and height
const { width, height } = useGetViewportSizes(200) // where 200(default) is the timeout for debounce
Hook will return width and height as float