{"id":13450946,"url":"https://github.com/TyMick/use-window-width-breakpoints","last_synced_at":"2025-03-23T16:32:45.878Z","repository":{"id":42800485,"uuid":"245240199","full_name":"TyMick/use-window-width-breakpoints","owner":"TyMick","description":"A React hook for using window width breakpoints.","archived":false,"fork":false,"pushed_at":"2023-01-07T04:45:19.000Z","size":989,"stargazers_count":7,"open_issues_count":8,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-13T13:44:53.665Z","etag":null,"topics":["breakpoints","hacktoberfest","hook","hooks","javascript","media-breakpoints","media-queries","npm","package","react","responsive","responsive-design","screen-size","screen-width","typescript"],"latest_commit_sha":null,"homepage":"https://npm.im/use-window-width-breakpoints","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-03-05T18:36:38.000Z","updated_at":"2021-10-30T17:06:42.000Z","dependencies_parsed_at":"2023-02-06T12:15:50.478Z","dependency_job_id":null,"html_url":"https://github.com/TyMick/use-window-width-breakpoints","commit_stats":null,"previous_names":["tywmick/use-media-breakpoints","tywmick/use-window-width-breakpoints"],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TyMick%2Fuse-window-width-breakpoints","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TyMick%2Fuse-window-width-breakpoints/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TyMick%2Fuse-window-width-breakpoints/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TyMick%2Fuse-window-width-breakpoints/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TyMick","download_url":"https://codeload.github.com/TyMick/use-window-width-breakpoints/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244250440,"owners_count":20423154,"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":["breakpoints","hacktoberfest","hook","hooks","javascript","media-breakpoints","media-queries","npm","package","react","responsive","responsive-design","screen-size","screen-width","typescript"],"created_at":"2024-07-31T07:00:40.706Z","updated_at":"2025-03-23T16:32:45.583Z","avatar_url":"https://github.com/TyMick.png","language":"TypeScript","funding_links":[],"categories":["Packages"],"sub_categories":[],"readme":"# useWindowWidthBreakpoints\n\n[![npm version](https://img.shields.io/npm/v/use-window-width-breakpoints)](https://www.npmjs.com/package/use-window-width-breakpoints \"View this package on npm\")\n[![npm peer dependency version](https://img.shields.io/npm/dependency-version/use-window-width-breakpoints/peer/react)](https://www.npmjs.com/package/use-window-width-breakpoints \"View this package on npm\")\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/use-window-width-breakpoints)](https://bundlephobia.com/result?p=use-window-width-breakpoints \"View this package on BundlePhobia\")\n[![License: Apache-2.0](https://img.shields.io/npm/l/use-window-width-breakpoints)](/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- **[Contributing](#contributing)**\n- **[Related projects](#related-projects)**\n\nA React hook for using window width breakpoints.\n\nI essentially wanted to duplicate the logic of [Bootstrap's `media-breakpoint` Sass mixins](https://getbootstrap.com/docs/4.5/layout/overview/#responsive-breakpoints) within my React code.\n\n\u003ch2 id=\"installation\"\u003eInstallation\u003c/h2\u003e\n\n```sh\nnpm install use-window-width-breakpoints\n# OR\nyarn add use-window-width-breakpoints\n```\n\n\u003ch2 id=\"usage\"\u003eUsage\u003c/h2\u003e\n\nAfter importing the hook...\n\n```js\nimport useWindowWidthBreakpoints from \"use-window-width-breakpoints\";\n```\n\n...call it from the top level of your React function.\n\n```js\nconst breakpoint = useWindowWidthBreakpoints({\n  xs: 0,\n  sm: 576,\n  md: 768,\n  lg: 992,\n  xl: 1200,\n});\n```\n\nThe hook has one optional parameter: an object containing the set of window width breakpoints (in pixels) you wish to use. If this parameter is omitted, [Bootstrap's default breakpoints](https://getbootstrap.com/docs/4.5/layout/overview/#containers) will be used. If you choose to specify your own set of breakpoints, `sm` and `lg` breakpoints are required, while `xs`, `md`, and `xl` breakpoints are optional.\n\nThis hook returns an object containing the boolean results of several media queries. For example, if the width of the window is `800px`, the value of `breakpoint` (as defined above) will be\n\n```js\n{\n  xs: false,\n  sm: false,\n  md: true,\n  lg: false,\n  xl: false,\n  only: {\n    xs: false,\n    sm: false,\n    md: true,\n    lg: false,\n    xl: false,\n  },\n  up: {\n    xs: true,\n    sm: true,\n    md: true,\n    lg: false,\n    xl: false,\n  },\n  down: {\n    xs: false,\n    sm: false,\n    md: true,\n    lg: true,\n    xl: true,\n  },\n  between: {\n    xs: {\n      sm: false,\n      md: true,\n      lg: true,\n      xl: true,\n    },\n    sm: {\n      md: true,\n      lg: true,\n      xl: true,\n    },\n    md: {\n      lg: true,\n      xl: true,\n    },\n    lg: {\n      xl: false,\n    },\n  },\n}\n```\n\nWhat's that good for? Say you have a React component you only want to display on `md`-sized screens. Throw this into your JSX:\n\n```jsx\n{breakpoint.md \u0026\u0026 \u003cMyComponent /\u003e}\n{/* OR */}\n{breakpoint.only.md \u0026\u0026 \u003cMyComponent /\u003e}\n```\n\nOr maybe you want to use one component on larger screens and a different one on smaller screens:\n\n```jsx\n{breakpoint.up.lg ? \u003cLargerVersion /\u003e : \u003cSmallerVersion /\u003e}\n```\n\nOr maybe you want to describe the size of the window in paragraph form with an odd sort of precision:\n\n```jsx\n\u003cp\u003e\n  This window is {breakpoint.between.sm.lg ? \"\" : \"pretty \"}\n  {breakpoint.down.sm ? \"small\" : breakpoint.up.lg ? \"big\" : \"average\"}.\n\u003c/p\u003e\n```\n\nBut that's up to you.\n\nHave fun!\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-width-breakpoints --clone=true\ncd use-window-width-breakpoints\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-width-breakpoints` in that other project).\n\n\u003ch2 id=\"related-projects\"\u003eRelated projects\u003c/h2\u003e\n\n- [useWindowOrientation](https://github.com/tywmick/use-window-orientation)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTyMick%2Fuse-window-width-breakpoints","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FTyMick%2Fuse-window-width-breakpoints","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTyMick%2Fuse-window-width-breakpoints/lists"}