{"id":19233407,"url":"https://github.com/grikomsn/use-tailwind-breakpoint","last_synced_at":"2026-01-19T17:05:20.197Z","repository":{"id":57125289,"uuid":"430027799","full_name":"kodingdotninja/use-tailwind-breakpoint","owner":"kodingdotninja","description":"Custom hooks to use breakpoints for React 🎐🔨","archived":false,"fork":false,"pushed_at":"2024-04-18T10:27:52.000Z","size":131,"stargazers_count":65,"open_issues_count":1,"forks_count":5,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-16T11:40:36.837Z","etag":null,"topics":["breakpoint","breakpoints","react","tailwind","tailwindcss","use-breakpoint","use-breakpoints"],"latest_commit_sha":null,"homepage":"https://koding.ninja/use-tailwind-breakpoint","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/kodingdotninja.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-11-20T06:30:59.000Z","updated_at":"2025-03-11T10:27:01.000Z","dependencies_parsed_at":"2024-06-21T03:40:14.136Z","dependency_job_id":null,"html_url":"https://github.com/kodingdotninja/use-tailwind-breakpoint","commit_stats":{"total_commits":19,"total_committers":2,"mean_commits":9.5,"dds":0.3157894736842105,"last_synced_commit":"f2149f8e5b7c6cfeaebfab18a28eaf5829c75408"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kodingdotninja%2Fuse-tailwind-breakpoint","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kodingdotninja%2Fuse-tailwind-breakpoint/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kodingdotninja%2Fuse-tailwind-breakpoint/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kodingdotninja%2Fuse-tailwind-breakpoint/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kodingdotninja","download_url":"https://codeload.github.com/kodingdotninja/use-tailwind-breakpoint/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253166521,"owners_count":21864482,"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":["breakpoint","breakpoints","react","tailwind","tailwindcss","use-breakpoint","use-breakpoints"],"created_at":"2024-11-09T16:10:28.036Z","updated_at":"2026-01-19T17:05:19.056Z","avatar_url":"https://github.com/kodingdotninja.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- markdownlint-disable MD033 MD036 MD041 --\u003e\n\n# use-tailwind-breakpoint\n\n![npm](https://badgen.net/npm/v/@kodingdotninja/use-tailwind-breakpoint)\n![packagephobia/install](https://badgen.net/packagephobia/install/@kodingdotninja/use-tailwind-breakpoint)\n![packagephobia/publish](https://badgen.net/packagephobia/publish/@kodingdotninja/use-tailwind-breakpoint)\n\nCustom hooks to use breakpoints for React 🎐🔨\n\n---\n\n**Table of contents**\n\n- [Install](#install)\n- [Usage](#usage)\n  - [Resolve from Tailwind CSS configuration](#resolve-from-tailwind-css-configuration)\n  - [Extract `screens` values](#extract-screens-values)\n  - [Without Tailwind CSS](#without-tailwind-css)\n- [Available hooks](#available-hooks)\n  - [`useBreakpoint()`](#usebreakpoint)\n  - [`useBreakpointEffect()`](#usebreakpointeffect)\n  - [`useBreakpointValue()`](#usebreakpointvalue)\n- [Maintainers](#maintainers)\n- [License](#license)\n\n---\n\n## Install\n\n```sh\npnpm install @kodingdotninja/use-tailwind-breakpoint\n```\n\n## Usage\n\n### Resolve from Tailwind CSS configuration\n\n[Similar to `pmndrs/zustand`'s `create` API](https://github.com/pmndrs/zustand/#first-create-a-store), initialize the breakpoint hooks by passing the resolved Tailwind CSS configuration using [`resolveConfig`](https://github.com/tailwindlabs/tailwindcss/blob/master/src/util/resolveConfig.js):\n\n```ts\n// /hooks/tailwind.ts\n\nimport { create } from \"@kodingdotninja/use-tailwind-breakpoint\";\nimport resolveConfig from \"tailwindcss/resolveConfig\";\n\nimport tailwindConfig from \"path/to/tailwind.config.js\";\n\nconst config = resolveConfig(tailwindConfig);\n\nexport const { useBreakpoint } = create(config.theme.screens);\n```\n\n### Extract `screens` values\n\nAnother option is to extract all [`screens`](https://tailwindcss.com/docs/breakpoints) values into a separate file:\n\n```js\n// tailwind.screens.js or other name to separate breakpoint values\nconst screens = {\n  sm: \"640px\",\n  md: \"768px\",\n  // ...\n};\n```\n\nTo keep the same values, `require` inside `tailwind.config.js`:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    screens: require(\"path/to/tailwind.screens.js\"),\n  },\n  // ...\n};\n```\n\nThen pass the extracted `screens` to the `create` function:\n\n```ts\n// /hooks/tailwind.ts\n\nimport { create } from \"@kodingdotninja/use-tailwind-breakpoint\";\n\nimport screens from \"path/to/tailwind.screens.js\";\n\nexport const { useBreakpoint } = create(screens);\n```\n\n### Without Tailwind CSS\n\nWhile this package was built in mind for Tailwind CSS usage, it can be used without it since there is no dependency at all. You can pass any breakpoint values:\n\n```ts\n// /hooks/breakpoint.ts\n\nimport create from \"@kodingdotninja/use-tailwind-breakpoint\";\n\nexport const { useBreakpoint } = create({\n  sm: \"640px\",\n  md: \"768px\",\n  // ...\n});\n```\n\n## Available hooks\n\n### `useBreakpoint()`\n\nUse breakpoint value from given breakpoint token\n\n```jsx\nimport { useBreakpoint } from \"./lib/tailwind\";\n\nfunction App() {\n  const isDesktop = useBreakpoint(\"md\");\n\n  return \u003cdiv\u003eCurrent view: {isDesktop ? \"Desktop\" : \"Mobile\"}\u003c/div\u003e;\n}\n```\n\n### `useBreakpointEffect()`\n\nUse given breakpoint value to run an effect\n\n```jsx\nimport { useBreakpointEffect } from \"./lib/tailwind\";\n\nfunction App() {\n  useBreakpointEffect(\"md\", (match) =\u003e {\n    if (match) {\n      console.log(\"Desktop view\");\n    }\n  });\n}\n```\n\n### `useBreakpointValue()`\n\nResolve value from given breakpoint value\n\n```jsx\nimport { useBreakpointValue } from \"./lib/tailwind\";\n\nfunction App() {\n  const value = useBreakpointValue(\"md\", \"Desktop\", \"Mobile\");\n\n  return \u003cdiv\u003eCurrent view: {value}\u003c/div\u003e;\n}\n```\n\n## Maintainers\n\n- Griko Nibras ([@grikomsn](https://github.com/grikomsn))\n\n## License\n\n[MIT License, Copyright (c) 2024 Koding Ninja](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrikomsn%2Fuse-tailwind-breakpoint","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgrikomsn%2Fuse-tailwind-breakpoint","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrikomsn%2Fuse-tailwind-breakpoint/lists"}