react-viewport-hooks
About
Get real viewport width & height
How to Install
First, install the library in your project by npm:
$ npm install react-viewport-hooks
Or Yarn:
$ yarn add react-viewport-hooks
Getting Started
Options
Name | Type | Default | Description |
---|---|---|---|
updateOnResize | boolean | true |
Update sizes on window resize |
defaultVW | number | undefined |
Fallback for default vw value |
defaultVH | number | undefined |
Fallback for default vh value |
Returned Values
Name | Type | Description |
---|---|---|
vw | number | Window viewport width |
vh | number | Window viewport height |
Example
useViewport
hook:
;; const App = { const vw vh = ; documentdocumentElementstyle; documentdocumentElementstyle; return <h1>Hello Viewport!</h1>;}; ;
withViewport
HOC:
;; const App = { documentdocumentElementstyle; documentdocumentElementstyle; return <h1>Hello Viewport!</h1>;}; /* object with options (if needed) */App;
License
This project is licensed under the MIT License © 2019-present Jakub Biesiada