{"id":21518733,"url":"https://github.com/halo-lab/use-breakpoints-width","last_synced_at":"2025-06-25T03:03:55.423Z","repository":{"id":45282063,"uuid":"283742705","full_name":"Halo-Lab/use-breakpoints-width","owner":"Halo-Lab","description":"React hook that shows the current breakpoint name and screen width.","archived":false,"fork":false,"pushed_at":"2022-01-18T07:43:50.000Z","size":42,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-09T22:07:12.100Z","etag":null,"topics":["hooks","react","reactjs","responsive"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"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/Halo-Lab.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}},"created_at":"2020-07-30T10:35:13.000Z","updated_at":"2023-04-15T17:58:35.000Z","dependencies_parsed_at":"2022-08-22T19:00:23.365Z","dependency_job_id":null,"html_url":"https://github.com/Halo-Lab/use-breakpoints-width","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Halo-Lab/use-breakpoints-width","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Halo-Lab%2Fuse-breakpoints-width","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Halo-Lab%2Fuse-breakpoints-width/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Halo-Lab%2Fuse-breakpoints-width/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Halo-Lab%2Fuse-breakpoints-width/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Halo-Lab","download_url":"https://codeload.github.com/Halo-Lab/use-breakpoints-width/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Halo-Lab%2Fuse-breakpoints-width/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261795306,"owners_count":23210615,"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":["hooks","react","reactjs","responsive"],"created_at":"2024-11-24T00:53:45.180Z","updated_at":"2025-06-25T03:03:55.395Z","avatar_url":"https://github.com/Halo-Lab.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# use-breakpoints-width\n\nA React hook for getting the current breakpoint name and screen width.   \n\n## Usage \nInitialize `use-breakpoints-width` with a configuration object. The return value will be an object with the breakpoint's name (string) and screen width (number). \n\n```js\nimport useBreakpoints from 'use-breakpoints-width';\n\nexport default function App() {\n  const { breakpoint, width } = useBreakpoints({ \n    breakpoints: {\n      desktop: 1200,\n      tablet: 768,\n      mobile: 0\n    },\n    debounceDelay: 250\n   });\n\n  return (\n    \u003cdiv\u003e\n      {`Breakpoint name is ${breakpoint}. Screen width is ${width}px`}\n    \u003c/div\u003e\n  );\n}\n```\n\n\u003e Default settings will apply in case you will provide no configuration\n\n```js\n{ \n  breakpoints: {\n    desktop: 992,\n    tablet: 768,\n    mobile: 0\n  },\n  debounceDelay: 250\n}\n```\n## Settings\n\n### Breakpoints\n\nYou can configure custom breakpoints by providing an object as the parameter.\n\n```js\nconst { breakpoint } = useBreakpoints({ \n  breakpoints: {\n    desktop: 1200,\n    tablet: 768,\n    mobile: 0\n  }\n});\n```\nMore examples for breakpoint names.\n```js\nconst { breakpoint } = useBreakpoints({ \n  breakpoints: {\n    xxlarge: 1440,\n    xlarge: 1200,\n    large: 1024,\n    medium: 640,\n    small: 0,\n  }\n});\n```\n\n```js\nconst { breakpoint } = useBreakpoints({ \n  breakpoints: {\n    'big-screen': 1440,\n    'small screen': 768,\n    'mobile_screen': 640,\n  }\n});\n```\n\n### Debounce delay time\n\nThis custom hook uses debounce due to optimization purposes. You can change the delay time to meet your requirements. Provide a new value as the `debounceDelay` property value. Number in milliseconds (**default 250ms**).\n\n```js\n...\nconst { breakpoint, width } = useBreakpoints({ \n  breakpoints: {\n    desktop: 1200,\n    tablet: 768,\n    mobile: 0\n  },\n  debounceDelay: 500\n});\n```\nIt's possible to left it undefined so default value will apply (**default 250ms**).  \n```js\n...\nconst { breakpoint, width } = useBreakpoints({ \n  breakpoints: {\n    desktop: 1200,\n    tablet: 768,\n    mobile: 0\n  }\n}); // debounceDelay is 250 ms now\n```\n\n## Word from author\n\nHave fun! ✌️\n\n\u003ca href=\"https://www.halo-lab.com/?utm_source=github\"\u003e\n  \u003cimg src=\"https://dgestran.sirv.com/Images/supported-by-halolab.png\" alt=\"Supported by Halo lab\" height=\"60\"\u003e\n\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhalo-lab%2Fuse-breakpoints-width","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhalo-lab%2Fuse-breakpoints-width","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhalo-lab%2Fuse-breakpoints-width/lists"}