{"id":13450942,"url":"https://github.com/TyMick/use-window-orientation","last_synced_at":"2025-03-23T16:32:37.417Z","repository":{"id":46328851,"uuid":"285870708","full_name":"TyMick/use-window-orientation","owner":"TyMick","description":"A React hook for using window orientation.","archived":false,"fork":false,"pushed_at":"2021-10-30T17:11:00.000Z","size":560,"stargazers_count":5,"open_issues_count":3,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-13T13:44:52.517Z","etag":null,"topics":["hacktoberfest","hook","hooks","javascript","landscape","media-queries","npm","orientation","package","portrait","react","responsive","responsive-design","screen-dimension","screen-orientation","typescript","window-dimensions","window-orientation"],"latest_commit_sha":null,"homepage":"https://npm.im/use-window-orientation","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TyMick.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2020-08-07T16:10:29.000Z","updated_at":"2022-02-24T10:52:09.000Z","dependencies_parsed_at":"2022-09-19T01:30:44.454Z","dependency_job_id":null,"html_url":"https://github.com/TyMick/use-window-orientation","commit_stats":null,"previous_names":["tywmick/use-window-orientation"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TyMick%2Fuse-window-orientation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TyMick%2Fuse-window-orientation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TyMick%2Fuse-window-orientation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TyMick%2Fuse-window-orientation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TyMick","download_url":"https://codeload.github.com/TyMick/use-window-orientation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245131132,"owners_count":20565776,"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":["hacktoberfest","hook","hooks","javascript","landscape","media-queries","npm","orientation","package","portrait","react","responsive","responsive-design","screen-dimension","screen-orientation","typescript","window-dimensions","window-orientation"],"created_at":"2024-07-31T07:00:40.669Z","updated_at":"2025-03-23T16:32:37.064Z","avatar_url":"https://github.com/TyMick.png","language":"TypeScript","funding_links":[],"categories":["Packages"],"sub_categories":[],"readme":"# useWindowOrientation\n\n[![npm version](https://img.shields.io/npm/v/use-window-orientation)](https://www.npmjs.com/package/use-window-orientation \"View this package on npm\")\n[![npm peer dependency version](https://img.shields.io/npm/dependency-version/use-window-orientation/peer/react)](https://www.npmjs.com/package/use-window-orientation \"View this package on npm\")\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/use-window-orientation)](https://bundlephobia.com/result?p=use-window-orientation \"View this package on BundlePhobia\")\n[![License: Apache-2.0](https://img.shields.io/npm/l/use-window-orientation)](/LICENSE)\n[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-v2.0-ff69b4.svg)](/CODE_OF_CONDUCT.md)\n\n- **[Installation](#installation)**\n- **[Usage](#usage)**\n- **[Options](#options)**\n- **[Caveats](#caveats)**\n- **[Contributing](#contributing)**\n- **[Related projects](#related-projects)**\n\nSometimes, just knowing [the window width](https://github.com/tywmick/use-window-width-breakpoints) isn't enough. Sometimes you want to know if the window's orientation is portrait or landscape. Good thing you found this React hook.\n\n\u003ch2 id=\"installation\"\u003eInstallation\u003c/h2\u003e\n\n```sh\nnpm install use-window-orientation\n# OR\nyarn add use-window-orientation\n```\n\n\u003ch2 id=\"usage\"\u003eUsage\u003c/h2\u003e\n\nAfter importing the hook...\n\n```js\nimport useWindowOrientation from \"use-window-orientation\";\n```\n\n...call it from the top level of your React function.\n\n```js\nconst { orientation, portrait, landscape } = useWindowOrientation();\n```\n\nThis hook returns an object with three properties, each describing the current orientation of the window in a different way.\n\n- `orientation` will be either `\"portrait\"` or `\"landscape\"`\n- `portrait` will be either `true` or `false`\n- `landscape` will be either `false` or `true`\n\nThe easiest way to access these properties is by using [object destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment), as in the above example. One advantage of this method is that you only have to declare variables for the properties you actually want to use. Only plan on using the `portrait` boolean in your code? Then just call the hook like this:\n\n```js\nconst { portrait } = useWindowOrientation();\n```\n\nWhat's this hook good for? Say you have two components, `Chart` and `Explanation`. You want `Explanation` to come first if the window is portrait, but you want `Chart` to come first if the window is landscape. Then arrange them in your JSX like this:\n\n```jsx\n{portrait \u0026\u0026 \u003cExplanation /\u003e}\n\u003cChart /\u003e;\n{landscape \u0026\u0026 \u003cExplanation /\u003e}\n```\n\nOr say you want to creep out your users by divining the orientation of their window:\n\n```jsx\n\u003cp\u003eWell, your window is {orientation} right now, so you leave me no choice.\u003c/p\u003e\n```\n\nThe possibilities are endless.\n\n\u003ch2 id=\"options\"\u003eOptions\u003c/h2\u003e\n\nThis hook has one optional parameter: an options object. There is currently only one option, `defaultOrientation`, the default orientation you'd like to return if no window exists (such as if a search engine is crawling your page). Valid `defaultOrientation`s are `\"portrait\"` or `\"landscape\"`, and if you omit the option, it will default to `\"portrait\"`.\n\n```js\nconst { orientation, portrait, landscape } = useWindowOrientation({\n  defaultOrientation: \"portrait\",\n});\n```\n\n\u003ch2 id=\"caveats\"\u003eCaveats\u003c/h2\u003e\n\nThis hook only deals with the _window_ orientation, not the _device_ orientation. It calculates this orientation using `window.innerWidth` and `window.innerHeight`. It does not consult [`window.orientation`](https://developer.mozilla.org/en-US/docs/Web/API/Window/orientation) at all because that feature has been deprecated.\n\nAlso, in the rare case that the window's width and height are equal, useWindowOrientation will just report the orientation as portrait.\n\n\u003ch2 id=\"contributing\"\u003eContributing\u003c/h2\u003e\n\nIf you'd like to contribute to this project (which would be awesome), the easiest way to set it up would be to install the [GitHub CLI](https://cli.github.com/) and then run the following:\n\n```sh\ngh repo fork tywmick/use-window-orientation --clone=true\ncd use-window-orientation\nnpm install\n```\n\nNow, you can build the package with `npm run build`, build _and_ watch for changes with `npm run dev` (automatically rebuilding on each change in the source), run the test suite with `npm run test`, and create pull requests with [`gh pr create`](https://cli.github.com/manual/gh_pr_create).\n\nAfter building the package, you can test it in another project on your machine by [adding the local path](https://docs.npmjs.com/files/package.json#local-paths) as a dependency (e.g., by running `npm install /path/to/local/use-window-orientation` in that other project).\n\n\u003ch2 id=\"related-projects\"\u003eRelated projects\u003c/h2\u003e\n\n- [useWindowWidthBreakpoints](https://github.com/tywmick/use-window-width-breakpoints)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTyMick%2Fuse-window-orientation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FTyMick%2Fuse-window-orientation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTyMick%2Fuse-window-orientation/lists"}