{"id":13469709,"url":"https://github.com/mvasin/react-div-100vh","last_synced_at":"2025-03-26T07:31:07.411Z","repository":{"id":32482723,"uuid":"135082477","full_name":"mvasin/react-div-100vh","owner":"mvasin","description":"A workaround for the '100vh' issue in mobile browsers","archived":false,"fork":false,"pushed_at":"2023-01-07T21:26:11.000Z","size":2029,"stargazers_count":1064,"open_issues_count":17,"forks_count":59,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-09-29T09:09:23.954Z","etag":null,"topics":["mobile-web","react"],"latest_commit_sha":null,"homepage":"https://react-div-100vh.vercel.app","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/mvasin.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-27T21:20:49.000Z","updated_at":"2024-09-19T09:48:34.000Z","dependencies_parsed_at":"2023-01-14T21:30:37.964Z","dependency_job_id":null,"html_url":"https://github.com/mvasin/react-div-100vh","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mvasin%2Freact-div-100vh","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mvasin%2Freact-div-100vh/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mvasin%2Freact-div-100vh/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mvasin%2Freact-div-100vh/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mvasin","download_url":"https://codeload.github.com/mvasin/react-div-100vh/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222121829,"owners_count":16934973,"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":["mobile-web","react"],"created_at":"2024-07-31T15:01:52.037Z","updated_at":"2024-10-29T22:31:26.321Z","avatar_url":"https://github.com/mvasin.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# `Div100vh` React component and `use100vh` React hook\n\n[![npm\nversion](https://badge.fury.io/js/react-div-100vh.svg)](https://badge.fury.io/js/react-div-100vh)\n\nThis is a workaround for iOS Safari and other mobile browsers.\n\n## The problem\n\nIn mobile browsers, the _real_ height of the viewport is dynamic, as browser\n\"chrome\" (panels) slide away on scrolling. The browser developers faced two\nchoices: either to reflow the page as the pixel value of a `vh` changes, or\nignore the fact that the browser panel covers part of the screen.\n\nThe browser panels are supposed to slide away smoothly, and because the layout\nreflow during scrolling will not look smooth, the browser developers went for\nthe second option.\n\nIt may work for the most of use cases, but if you're looking for an app-like\nfull-screen experience, or want to make sure that the call to action button at\nthe bottom of your splash screen isn't covered, you may need to know the fair\nvalue of a `vh`.\n\n| `\u003cdiv style={{height: '100vh'}}\u003e`                                                                                               | `\u003cDiv100vh\u003e`                                                                                                                        |\n| ------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |\n| ![Page cropped by bottom Safari chrome](https://raw.githubusercontent.com/mvasin/react-div-100vh/master/images/regular-div.png) | ![Page cropped by bottom Safari chrome](https://raw.githubusercontent.com/mvasin/react-div-100vh/master/images/react-div-100vh.png) |\n\nMore on this issue\n[here](https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html).\n\n## The solution\n\n`Div100vh` React component is the default export:\n\n```jsx\nimport Div100vh from 'react-div-100vh'\n\nconst MyFullHeightComponent = () =\u003e (\n  \u003cDiv100vh\u003e\n    \u003cmarquee\u003eLook ma, no crop!\u003c/marquee\u003e\n  \u003c/Div100vh\u003e\n)\n```\n\nFor more advanced use cases (for instance, if you need 50% of the real height),\nthere is a named export `use100vh`. This React hook provides an accurate\nvertical height in pixels. The return type is a `number` in a browser and `null`\nin Node environment. You may need to check if it's not `null` if you're doing\nSSR, otherwise, manipulate the value as you wish and concatenate the result with\n`px`:\n\n```jsx\nimport { use100vh } from 'react-div-100vh'\n\nconst MyHalfHeightExampleComponent = ({ children }) =\u003e {\n  const height = use100vh()\n  const halfHeight = height ? height / 2 : '50vh'\n  return \u003cdiv style={{ height: halfHeight }}\u003e{children}\u003c/div\u003e\n}\n```\n\nUnder the hood `use100vh` uses `measureHeight` function which is exported as\nwell, so feel free to use it, even without React. Currently it returns\n`window.innerHeight` in a browser and `null` in Node.\n\n## Testing\n\nThis component is tested with \u003ca href=\"https://www.browserstack.com\"\u003e\u003cimg\ntitle=\"BrowserStack\" alt=\"BrowserStack Logo\" height=\"40\"\nsrc=\"https://raw.githubusercontent.com/mvasin/react-div-100vh/master/images/browser-stack.svg\"\u003e\u003c/a\u003e.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmvasin%2Freact-div-100vh","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmvasin%2Freact-div-100vh","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmvasin%2Freact-div-100vh/lists"}