{"id":15007809,"url":"https://github.com/nathan-i-martin/react-ui-breakpoints","last_synced_at":"2026-03-17T13:24:04.716Z","repository":{"id":54821340,"uuid":"501484566","full_name":"nathan-i-martin/react-ui-breakpoints","owner":"nathan-i-martin","description":"Easily add media breakpoints to your react project","archived":false,"fork":false,"pushed_at":"2024-02-22T20:03:50.000Z","size":328,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-11T08:55:50.786Z","etag":null,"topics":["dynamic-web","dynamic-website","media-queries","npm","react","react-hooks","typescript"],"latest_commit_sha":null,"homepage":"","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/nathan-i-martin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2022-06-09T02:58:42.000Z","updated_at":"2024-03-02T01:17:20.000Z","dependencies_parsed_at":"2024-02-22T21:24:39.276Z","dependency_job_id":"bc73c346-ca28-4d33-8ec1-9d8d40a257b4","html_url":"https://github.com/nathan-i-martin/react-ui-breakpoints","commit_stats":null,"previous_names":["nmartin42/react-ui-breakpoints"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathan-i-martin%2Freact-ui-breakpoints","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathan-i-martin%2Freact-ui-breakpoints/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathan-i-martin%2Freact-ui-breakpoints/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathan-i-martin%2Freact-ui-breakpoints/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nathan-i-martin","download_url":"https://codeload.github.com/nathan-i-martin/react-ui-breakpoints/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243131045,"owners_count":20241183,"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":["dynamic-web","dynamic-website","media-queries","npm","react","react-hooks","typescript"],"created_at":"2024-09-24T19:14:01.420Z","updated_at":"2025-12-25T13:59:06.229Z","avatar_url":"https://github.com/nathan-i-martin.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-ui-breakpoints (RUB) ![npm](https://badgen.net/npm/v/react-ui-breakpoints)\nEasily add media breakpoints to your react components with the useScreen hook!\n\n## Installation\n```\nnpm i react-ui-breakpoints\n```\n\n## Introduction\nReact is a powerful, component-based, tool that streamlines the process of developing clean readable website code! And through the use of [React Hooks][1], developers can easily add and create additional functionalities which aren't already in React! React UI Breakpoints (RUB) is one of these functionalities! It allows a clean and simple system for managing media breakpoints in your React project, allowing you to deliver readable, well-organized code which dynamically changes as users resize various aspects of a website.\n\n## Getting Started\nTo get started, install RUB in your project.\n\n```\nnpm i react-ui-breakpoints\n```\n\nRUB contains two hooks you can use to build screen breakpoints; `useScreen` and `useView`. Attach them to the return of a component to make it dynamic!\nYou can also define if you want your breakpoints to operate in Desktop first or Mobile first mode using the QueryMode enum! (Hint: Modern website development should always use Mobile first.)\n```tsx\nconst ExampleComponent = () =\u003e {\n    const MobileView = () =\u003e (\n        \u003cdiv className='text-left text-neutral-100 text-6xl'\u003e\n            \u003cspan\u003eSome text\u003c/span\u003e\n        \u003c/div\u003e\n    );\n    const TabletView = () =\u003e (\n        \u003cdiv className='text-left text-neutral-100 text-6xl'\u003e\n            \u003cspan\u003eSome text\u003c/span\u003e\n        \u003c/div\u003e\n    );\n    const DesktopView = () =\u003e (\n        \u003cdiv className='text-center text-neutral-100 text-lg'\u003e\n            \u003cspan\u003eSome text\u003c/span\u003e\n        \u003c/div\u003e\n    );\n\n    return useScreen(\n        QueryMode.MOBILE_FIRST,\n        useView('1000px', DesktopView());\n        useView('700px', TabletView());\n        useView(\"default\", MobileView());\n    );\n}\n```\nThe component above is what we call a *dynamic component*. Instead of directly returning JSX, we hold multiple *views* and then return them as the breakpoints are met!\n\nLet's also review a version that has state:\n```tsx\nconst ExampleComponent = () =\u003e {\n    const [ something, setSomething ]: [ string, Function ] = useState('');\n\n    useEffect(() =\u003e setSomething('Hello world!'),[]);\n\n    const MobileView = () =\u003e (\n        \u003cdiv className='text-left text-neutral-100 text-6xl'\u003e\n            \u003cspan\u003e{something}\u003c/span\u003e\n        \u003c/div\u003e\n    );\n    const TabletView = () =\u003e (\n        \u003cdiv className='text-left text-neutral-100 text-6xl'\u003e\n            \u003cspan\u003e{something}\u003c/span\u003e\n        \u003c/div\u003e\n    );\n    const DesktopView = () =\u003e (\n        \u003cdiv className='text-center text-neutral-100 text-lg'\u003e\n            \u003cspan\u003e{something}\u003c/span\u003e\n        \u003c/div\u003e\n    );\n\n    return useScreen(\n        QueryMode.MOBILE_FIRST,\n        useView('1000px', DesktopView());\n        useView('700px', TabletView());\n        useView(\"default\", MobileView());\n    );\n}\n```\nAs you can see, we don't save state inside of the *views*, instead, we hold state in the parent component and then reference that state inside of our views!\n\n### Auto-resizing\n\nRUB will only ever update when the component itself updates. If you want the components to update automatically on screen-resizing. You can attach the `useHookOntoScreen` React hook!\nThis hook will cause your component to re-render anytime the viewport is resized.\nIf you already have viewport specific state in your component. Adding this hook is unnecessary.\n```tsx\nconst ExampleComponent = () =\u003e {\n    const autoResize = useHookOntoScreen();\n\n    const MobileView = () =\u003e (\n        \u003cdiv className='text-left text-neutral-100 text-6xl'\u003e\n            \u003cspan\u003eSome text\u003c/span\u003e\n        \u003c/div\u003e\n    );\n    const TabletView = () =\u003e (\n        \u003cdiv className='text-left text-neutral-100 text-6xl'\u003e\n            \u003cspan\u003eSome text\u003c/span\u003e\n        \u003c/div\u003e\n    );\n    const DesktopView = () =\u003e (\n        \u003cdiv className='text-center text-neutral-100 text-lg'\u003e\n            \u003cspan\u003eSome text\u003c/span\u003e\n        \u003c/div\u003e\n    );\n\n    return useScreen(\n        QueryMode.MOBILE_FIRST,\n        useView('1000px', DesktopView());\n        useView('700px', TabletView());\n        useView(\"default\", MobileView());\n    );\n}\n```\n\n## Disclaimer\nIt can be easy to misuse the features that RUB gives you.\nMaking hundreds of breakpoints instead of properly designing your webpage for resizing is not suggested.\nRUB Breakpoints should only be considered when you have major page elements that you want to add or remove between different viewports.\n\n[1]: https://reactjs.org/docs/hooks-reference.html\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnathan-i-martin%2Freact-ui-breakpoints","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnathan-i-martin%2Freact-ui-breakpoints","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnathan-i-martin%2Freact-ui-breakpoints/lists"}