0.0.1-alpha.3 • Published 2 years ago
@rendr-view/use-fill-available v0.0.1-alpha.3
@rendr-view/use-fill-available
A React hook that creates a --vh
CSS variable that automatically represents 1% of the available height of the screen (to account for iOS Safari toolbars, for example).
Installation
yarn add @rendr-view/use-fill-available
Example usage
// tailwind.config.js
module.exports = {
...config,
theme: {
extend: {
spacing: {
"fill-available": "calc(var(--vh, 1vh) * 100)"
}
}
}
}
// _app.tsx
const App = () => {
useFillAvailable();
return <div>
<div className="h-fill-available">This adapts to the available height of the screen</div>
</div>
}