{"id":13761953,"url":"https://github.com/basementstudio/next-real-viewport","last_synced_at":"2025-04-13T06:27:46.628Z","repository":{"id":37022208,"uuid":"333546822","full_name":"basementstudio/next-real-viewport","owner":"basementstudio","description":"No more horizontal scroll when using 100vw 🎉. No more issues with the 100vh in mobile browsers 🤯.","archived":false,"fork":false,"pushed_at":"2023-10-30T01:45:45.000Z","size":736,"stargazers_count":123,"open_issues_count":10,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-04T11:52:17.032Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/basementstudio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2021-01-27T20:11:11.000Z","updated_at":"2025-03-27T02:42:48.000Z","dependencies_parsed_at":"2024-04-19T18:56:27.794Z","dependency_job_id":"e8ec7c43-a827-4900-96ce-456b927062d9","html_url":"https://github.com/basementstudio/next-real-viewport","commit_stats":{"total_commits":7,"total_committers":4,"mean_commits":1.75,"dds":0.4285714285714286,"last_synced_commit":"1c8da9f62aa6d0259d8c1905b877747ee3f4a6b1"},"previous_names":["basementstudio/next-real-vw"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basementstudio%2Fnext-real-viewport","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basementstudio%2Fnext-real-viewport/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basementstudio%2Fnext-real-viewport/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basementstudio%2Fnext-real-viewport/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/basementstudio","download_url":"https://codeload.github.com/basementstudio/next-real-viewport/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248673458,"owners_count":21143500,"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":[],"created_at":"2024-08-03T14:00:32.012Z","updated_at":"2025-04-13T06:27:46.606Z","avatar_url":"https://github.com/basementstudio.png","language":"TypeScript","funding_links":[],"categories":["miscellaneous"],"sub_categories":[],"readme":"# next-real-viewport\n\nNo more horizontal scroll when using `100vw` 🎉. No more issues with the `100vh` in mobile browsers 🤯.\nYou know the bug. The one that drives you crazy.\n\n![viewport](https://user-images.githubusercontent.com/13522179/174339237-a05d651b-aa36-43d9-8dd9-85a4f32b74f4.png)\n\n\n1. You need to set some element's width to be full screen.\n2. You use `width: 100vw`\n3. Then you get your desktop computer, and your mouse introduces a scrollbar. Huh.\n4. Now your site has a tiny horizontal scroll 🤮\n\nOr maybe\n\n1. You need to set some element's _height_ to be full screen.\n2. You use `height: 100vh`\n3. Then you get your iphone and Safari's UI is all over. Wot?\n\nThis package simply calculates the real width of the viewport and sets some css variables to the document root, so you can enjoy a life without horizontal scroll, nor Safari issues.\n\n- ✅ Use via css variables (`--vw` and `--vh`) or via the `useRealViewport` hook\n- ✅ Listen to screen resizing\n- ✅ No flash on load (both SSR and SSG)\n\n## Install\n\n```bash\nnpm install next-real-viewport\n```\n\nor\n\n```bash\nyarn add next-real-viewport\n```\n\n## Set Up\n\n### RealViewportProvider (context)\n\nTo start using `next-real-viewport`, simply use the exported provider anywhere you want. The recommended place to use it is in a custom [`_app`](https://nextjs.org/docs/advanced-features/custom-app).\n\n```js\n// pages/_app.{js,tsx}\n\nimport { RealViewportProvider } from \"next-real-viewport\";\n\nfunction MyApp({ Component, pageProps }) {\n  return (\n    \u003cRealViewportProvider\u003e\n      \u003cComponent {...pageProps} /\u003e\n    \u003c/RealViewportProvider\u003e\n  );\n}\n\nexport default MyApp;\n```\n\n## Use\n\n### In CSS\n\nYou can use the css variables anywhere:\n\n```css\n.fullWidth {\n  width: calc(var(--vw) * 100);\n}\n\n.fullHeight {\n  height: calc(var(--vh) * 100);\n}\n```\n\n### useRealViewport\n\nMaybe you don't want to use the css variables (i don't know why anyone might not want to, they're awesome). But here's how to get the absolute values:\n\n```js\nimport { useRealViewport } from \"next-real-viewport\";\n\nconst Demo = ({ children }) =\u003e {\n  const { vw, vh } = useRealViewport();\n\n  return (\n    \u003cdiv\n      style={{\n        width: vw * 100,\n      }}\n    \u003e\n      {children}\n    \u003c/div\u003e\n  );\n};\n```\n\n### Some Components\n\n`next-real-viewport` comes with two layout components:\n\n- `\u003cViewportWidthBox /\u003e`\n- `\u003cViewportHeightBox /\u003e`\n\n```js\nimport { ViewportWidthBox, ViewportHeightBox } from \"next-real-viewport\";\n\nconst Demo = ({ children }) =\u003e {\n  return (\n    \u003c\u003e\n      \u003cViewportWidthBox center\u003e\n        My full screen content here. A table, maybe.\n      \u003c/ViewportWidthBox\u003e\n      \u003cViewportHeightBox\u003e\n        My full height content. A mobile menu, maybe.\n      \u003c/ViewportHeightBox\u003e\n    \u003c/\u003e\n  );\n};\n```\n\n## Discussion\n\n### The Layout Shift\n\nInspired by [next-themes](https://github.com/pacocoursey/next-themes), `RealVwProvider` automatically injects a script into `next/head` to update the `html` element with the css variable values before the rest of your page loads. This means the page will not have layout shift under any circumstances.\n\n### The React Context\n\n\u003e Or, \"Why do we use React Context for this?\"\n\nReact Context is not used only for the hook, `useRealViewport`. No, we mainly use it because we need a listener for the `resize` event, and we don't want more than one.\n\nCould the listener be set inside the `\u003cscript /\u003e`? Hm, maybe... But I haven't explored the downsides of having that (mainly, having more render-blocking JS).\n\nPRs are welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasementstudio%2Fnext-real-viewport","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbasementstudio%2Fnext-real-viewport","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasementstudio%2Fnext-real-viewport/lists"}