{"id":22533628,"url":"https://github.com/cool-hooks/react-viewport-hooks","last_synced_at":"2026-05-04T02:34:21.584Z","repository":{"id":38173953,"uuid":"200477757","full_name":"cool-hooks/react-viewport-hooks","owner":"cool-hooks","description":"📏 Get the real width \u0026 height of the window","archived":false,"fork":false,"pushed_at":"2023-01-06T02:04:09.000Z","size":3099,"stargazers_count":1,"open_issues_count":25,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-10-14T12:01:55.047Z","etag":null,"topics":["height","hooks","react","sizes","viewport","width","window"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cool-hooks.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-04T10:13:46.000Z","updated_at":"2021-12-25T10:13:43.000Z","dependencies_parsed_at":"2023-02-05T02:15:30.850Z","dependency_job_id":null,"html_url":"https://github.com/cool-hooks/react-viewport-hooks","commit_stats":null,"previous_names":["jb1905/react-viewport-hooks"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cool-hooks%2Freact-viewport-hooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cool-hooks%2Freact-viewport-hooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cool-hooks%2Freact-viewport-hooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cool-hooks%2Freact-viewport-hooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cool-hooks","download_url":"https://codeload.github.com/cool-hooks/react-viewport-hooks/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245978231,"owners_count":20703677,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["height","hooks","react","sizes","viewport","width","window"],"created_at":"2024-12-07T09:09:06.229Z","updated_at":"2026-05-04T02:34:16.554Z","avatar_url":"https://github.com/cool-hooks.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [react-viewport-hooks](https://github.com/jb1905/react-viewport-hooks)\n\n[![NPM version](https://img.shields.io/npm/v/react-viewport-hooks?style=flat-square)](https://www.npmjs.com/package/react-viewport-hooks)\n[![NPM downloads](https://img.shields.io/npm/dm/react-viewport-hooks?style=flat-square)](https://www.npmjs.com/package/react-viewport-hooks)\n[![NPM license](https://img.shields.io/npm/l/react-viewport-hooks?style=flat-square)](https://www.npmjs.com/package/react-viewport-hooks)\n[![Codecov](https://img.shields.io/codecov/c/github/JB1905/react-viewport-hooks?style=flat-square)](https://codecov.io/gh/cool-hooks/react-viewport-hooks)\n[![Travis](https://img.shields.io/travis/cool-hooks/react-viewport-hooks/master?style=flat-square)](https://travis-ci.org/cool-hooks/react-viewport-hooks)\n[![Bundle size](https://img.shields.io/bundlephobia/min/react-viewport-hooks?style=flat-square)](https://bundlephobia.com/result?p=react-viewport-hooks)\n\n## About\n\nGet real viewport width \u0026 height\n\n### Demo\n\nPlay with the library in CodeSandbox\n\n- [hooks](https://codesandbox.io/s/hooks-demo-m8qxm)\n- [HOC - Soon](#)\n\n## How to Install\n\nFirst, install the library in your project by npm:\n\n```sh\n$ npm install react-viewport-hooks\n```\n\nOr Yarn:\n\n```sh\n$ yarn add react-viewport-hooks\n```\n\n## Getting Started\n\n#### Options\n\n| Name               | Type    | Default     | Description                     |\n| ------------------ | ------- | ----------- | ------------------------------- |\n| **updateOnResize** | boolean | `true`      | Update sizes on window resize   |\n| **defaultVW**      | number  | `undefined` | Fallback for default `vw` value |\n| **defaultVH**      | number  | `undefined` | Fallback for default `vh` value |\n\n#### Returned Values\n\n| Name   | Type   | Description            |\n| ------ | ------ | ---------------------- |\n| **vw** | number | Window viewport width  |\n| **vh** | number | Window viewport height |\n\n#### Example\n\n**`useViewport` hook:**\n\n```js\nimport React from 'react';\nimport { useViewport } from 'react-viewport-hooks';\n\nconst App = () =\u003e {\n  const { vw, vh } = useViewport(/* object with options (if needed) */);\n\n  document.documentElement.style.setProperty('--vw', `${vw}px`);\n  document.documentElement.style.setProperty('--vh', `${vh}px`);\n\n  return \u003ch1\u003eHello Viewport!\u003c/h1\u003e;\n};\n\nexport default App;\n```\n\n**`withViewport` HOC:**\n\n```js\nimport React from 'react';\nimport { withViewport } from 'react-viewport-hooks';\n\nconst App = ({ vw, vh }) =\u003e {\n  document.documentElement.style.setProperty('--vw', `${vw}px`);\n  document.documentElement.style.setProperty('--vh', `${vh}px`);\n\n  return \u003ch1\u003eHello Viewport!\u003c/h1\u003e;\n};\n\nexport default withViewport(/* object with options (if needed) */)(App);\n```\n\n## License\n\nThis project is licensed under the MIT License © 2019-present Jakub Biesiada\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcool-hooks%2Freact-viewport-hooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcool-hooks%2Freact-viewport-hooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcool-hooks%2Freact-viewport-hooks/lists"}