{"id":15019228,"url":"https://github.com/codemonk-digital/react-responsiveness","last_synced_at":"2026-01-20T19:32:09.898Z","repository":{"id":117999768,"uuid":"610088908","full_name":"codemonk-digital/react-responsiveness","owner":"codemonk-digital","description":"Responsiveness in React made easy.","archived":false,"fork":false,"pushed_at":"2024-01-20T03:44:40.000Z","size":446,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-09-20T11:22:13.896Z","etag":null,"topics":["bootstrap3","bootstrap4","bootstrap5","bulma","media-queries","reactjs","responsiveness","ssr","tailwindcss"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-responsiveness","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/codemonk-digital.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.MD","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-06T04:04:42.000Z","updated_at":"2025-05-02T12:01:09.000Z","dependencies_parsed_at":"2024-09-13T04:11:02.380Z","dependency_job_id":null,"html_url":"https://github.com/codemonk-digital/react-responsiveness","commit_stats":{"total_commits":62,"total_committers":3,"mean_commits":"20.666666666666668","dds":"0.30645161290322576","last_synced_commit":"df19924d9e29383b51610501417d1a0b94adb921"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/codemonk-digital/react-responsiveness","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemonk-digital%2Freact-responsiveness","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemonk-digital%2Freact-responsiveness/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemonk-digital%2Freact-responsiveness/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemonk-digital%2Freact-responsiveness/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codemonk-digital","download_url":"https://codeload.github.com/codemonk-digital/react-responsiveness/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemonk-digital%2Freact-responsiveness/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28610608,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T18:56:40.769Z","status":"ssl_error","status_checked_at":"2026-01-20T18:54:26.653Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["bootstrap3","bootstrap4","bootstrap5","bulma","media-queries","reactjs","responsiveness","ssr","tailwindcss"],"created_at":"2024-09-24T19:53:11.710Z","updated_at":"2026-01-20T19:32:09.878Z","avatar_url":"https://github.com/codemonk-digital.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv class=\"center\"\u003e\n\u003ch1\u003eReact Responsiveness\u003c/h1\u003e\n\u003c/div\u003e\n\n**What** - Tiny plugin for working with responsiveness intervals, developed with a focus on ease of use (DX) and runtime performance.  \n**Why** - I am a bit obsessed with both performance and ease of use. See [how it works](#how-it-works)\n\n\u003cp\u003e\n\u003ca href=\"https://www.npmjs.com/package/react-responsiveness\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/react-responsiveness.svg?color=f9d342\u0026style=flat-square\" alt=\"Total Downloads\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/react-responsiveness\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/react-responsiveness.svg?color=f9d342\u0026style=flat-square\" alt=\"Latest Release\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/codemonk-digital/react-responsiveness/blob/main/LICENSE.MD\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/react-responsiveness.svg?color=f9d342\u0026style=flat-square\" alt=\"License\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/codemonk-digital/react-responsiveness/blob/main/package.json#L27\"\u003e\u003cimg src=\"https://img.shields.io/badge/dependencies-0-f9d342.svg?style=flat-square\" alt=\"Dependencies\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://unpkg.com/react-responsiveness\"\u003e\u003cimg src=\"https://img.badgesize.io/https://unpkg.com/react-responsiveness.svg?compression=gzip\u0026label=umd:minzip\u0026color=f9d342\u0026style=flat-square\" alt=\"unpkg umd min:gzip size\" /\u003e\u003c/a\u003e\n\u003cimg src=\"https://img.shields.io/badge/SSR-ready-f9d342?style=flat-square\" alt=\"SSR compatibility status\"/\u003e\n\u003ca href=\"https://makeapullrequest.com\"\u003e\u003cimg src=\"https://img.shields.io/badge/PRs-welcome-f9d342.svg?style=flat-square\" alt=\"PRs Welcome\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Installation\n\n#### yarn\n\n```terminal\nyarn add react-responsiveness\n```\n\n#### npm\n\n```terminal\nnpm i react-responsiveness\n```\n\n## Demo\n\n[codesandbox](https://codesandbox.io/p/sandbox/react-responsiveness-lx3789?file=/src/App.tsx).\n\n## Usage\n\n#### A) Add provider\n\u003cdetails\u003e\n    \u003csummary\u003eExample\u003c/summary\u003e\n\n```tsx\nimport { ResponsivenessProvider, Presets } from \"react-responsiveness\";\n\nfunction App() {\n    // ...\n}\n\nconst WithResponsiveness = () =\u003e (\n  \u003cResponsivenessProvider breakpoints={Presets.Bootstrap_5}\u003e\n    \u003cApp /\u003e\n  \u003c/ResponsivenessProvider\u003e\n);\nexport default WithResponsiveness;\n```\n\n\u003c/details\u003e\n\n#### B) Use in any component\n\u003cdetails\u003e\n    \u003csummary\u003eExample\u003c/summary\u003e\n\n```tsx\nimport { useResponsiveness } from \"react-responsiveness\";\n\nconst { isMin, isMax, isOnly, currentInterval } = useResponsiveness()\n\nreturn (\u003c\u003e\n   \u003cdiv\u003eCurrent interval {currentInterval}\u003c/div\u003e\n   {isMin('md') \u0026\u0026 (\n       // @media (min-width: 768px)\n       \u003cdiv\u003econtent...\u003c/div\u003e\n   )}\n   {isMax('md') \u0026\u0026 (\n       // @media (max-width: 991.9px)\n       \u003cdiv\u003econtent...\u003c/div\u003e\n   )}\n   {isOnly('md') \u0026\u0026 (\n       // @media (min-width: 768px) and (max-width: 991.9px)\n       \u003cdiv\u003econtent...\u003c/div\u003e\n   )}\n\u003c/\u003e)\n```\n\u003c/details\u003e\n\n## Available presets:\n\n`Bootstrap_3`, `Bootstrap_4`, `Bootstrap_5`, `Bulma`, `Chakra`, `Foundation`, `Ionic`, `Material_Design`, `Materialize`, `Material_UI`, `Quasar`, `Semantic_UI`, `Skeleton`, `Tailwind_CSS`, `Windi_CSS`\n\n_Notes:_ \n - Default breakpoints value is **_already set_** to Bootstrap 5's [responsiveness breakpoints](https://getbootstrap.com/docs/5.3/layout/breakpoints/#available-breakpoints) preset.\n\u003cdetails\u003e\n    \u003csummary\u003ePreset details\u003c/summary\u003e\n\n```tsx\nPresets.Bootstrap_5 = {\n  xs: 0,\n  sm: 576,\n  md: 768,\n  lg: 992,\n  xl: 1200,\n  xxl: 1400,\n};\n```\n\u003c/details\u003e\n\n- If you maintain a CSS framework (or use one often) and want its preset added, [open an issue](https://github.com/codemonk-digital/react-responsiveness/issues) or a PR.\n- If you spot any inaccuracy in [presets](https://github.com/codemonk-digital/react-responsiveness/blob/main/lib/presets.ts) (either typo or due to library update), please, let me know, I'll correct it.\n\n## Can I add my own intervals? Of course:\n\n```tsx\n\u003cResponsivenessProvider\n  breakpoints={{\n    small: 0,\n    medium: 777,\n    large: 1234,\n  }}\n\u003e\n  // ...\n\u003c/ResponsivenessProvider\u003e\n```\n... can then be used as:\n```tsx\nimport { useResponsiveness } from \"react-responsiveness\";\n\nconst { isOnly } = useResponsiveness()\n\nreturn (\u003c\u003e\n    {isOnly('medium') \u0026\u0026 (\n        // @media (min-width: 777px) and (max-width: 1233.9px)\n        \u003cdiv\u003econtent...\u003c/div\u003e\n    )}\n\u003c/\u003e)\n```\n## F.A.Q.\n\u003cdetails\u003e\n    \u003csummary\u003eMy IDE doesn't pick up the types for the package. Is there anything I can do about it?\u003c/summary\u003e\n\nI've noticed this weird problem in some codesandbox.io instances. \n\nI don't know why it happens but here's what you can do to fix it: create a `react-responsiveness.d.ts` file in `src/` folder, with the following content:\n\n```ts\ndeclare module \"react-responsiveness\" {\n    export * from \"react-responsiveness\" \n}\n```\nThis seems to fix TS.  \nAnother fix which sometimes works is to re-start the TS service.\n\u003c/details\u003e\n\n## How it works:\n\n- uses the native [`window.matchMedia(queryString)`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) and only reacts to changes in the query's `matches` value. It's the same API powering CSS media queries\n- listeners are placed on the `MediaQueryList` instances, meaning they are garbage collected as soon as the app is unmounted, without leaving bound events behind on `\u003cbody\u003e` or `window` object\n- no global pollution\n- in terms of memory and/or CPU consumption, listening to `window.matchMadia` 'change' events is a few hundred times lighter than using the _\"traditional\"_ `resize` event listener method\n\n## Is the package working well for you?\n- star the repo\n- help [this answer](https://stackoverflow.com/a/76999879/1891677) get higher in the list\n\n## Got issues?\n\n[Let me know!](https://github.com/codemonk-digital/react-responsiveness/issues)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodemonk-digital%2Freact-responsiveness","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodemonk-digital%2Freact-responsiveness","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodemonk-digital%2Freact-responsiveness/lists"}