{"id":16123774,"url":"https://github.com/kaf-lamed-beyt/react-tab","last_synced_at":"2025-03-18T12:31:32.544Z","repository":{"id":174622639,"uuid":"652205674","full_name":"kaf-lamed-beyt/react-tab","owner":"kaf-lamed-beyt","description":"Tab component states in the browser's URL.","archived":false,"fork":false,"pushed_at":"2024-02-28T08:16:13.000Z","size":419,"stargazers_count":13,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-10T17:07:56.660Z","etag":null,"topics":["nextjs","react","state-management","tabs","tabs-widget"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-tab-state","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/kaf-lamed-beyt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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,"publiccode":null,"codemeta":null}},"created_at":"2023-06-11T12:32:13.000Z","updated_at":"2024-04-10T13:08:06.000Z","dependencies_parsed_at":null,"dependency_job_id":"e4936ec0-a56a-428c-87a9-f47455b76b9d","html_url":"https://github.com/kaf-lamed-beyt/react-tab","commit_stats":null,"previous_names":["kaf-lamed-beyt/react-tab"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaf-lamed-beyt%2Freact-tab","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaf-lamed-beyt%2Freact-tab/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaf-lamed-beyt%2Freact-tab/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaf-lamed-beyt%2Freact-tab/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kaf-lamed-beyt","download_url":"https://codeload.github.com/kaf-lamed-beyt/react-tab/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243926063,"owners_count":20369911,"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":["nextjs","react","state-management","tabs","tabs-widget"],"created_at":"2024-10-09T21:18:42.374Z","updated_at":"2025-03-18T12:31:32.225Z","avatar_url":"https://github.com/kaf-lamed-beyt.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-tab\n\nstate-aware tab components in react built with Next.js `useRouter()` hook.\n\n## Why?\n\nThis started off from working with the Tab component in ChakraUI. Although, there's a \"managing active tab state\" section in their docs and that may suffice for some of your use-cases.\n\nWith react-tabs, you might not need to write the logic to manage just the active state of your tab items or use a state management library. The state of the tab component is preserved in the browser URL when you switch between routes.\n\nSay, for example, there are four `tabItems`, you procced to select the second tab item and navigate to another route or you refresh the current page, React re-renders the component and the state is lost, hence the active component goes back to being the first `tabItem`.\n\nThis becomes an issue when you're working in large applications, where tiny details \u0026mdash; like preserving the tab state \u0026mdash; that improves the overall UX of your app depends on these side effects.\n\nThe browser URL can be used as a global state store which we'll use to keep the state of this component.\n\n## Usage\n\nCurrently, react-tab has support for barebones react projects \u0026mdash; that do not depend on a component UI library like Chakra UI etc. \u0026mdash;\n\nSupport for chakra-ui is going on though. It should be live soon \u0026mdash; or never. it all depends on the bandwidth i can give to it 🥲\n\nTo use the component, you can install it with your preferred package manager. The command below ascertains that.\n\n```bash\nyarn add react-tab-state\n```\n\nThe component expects you to have an array of `tabItems` you wish to render, something like the one below;\n\n```tsx\nimport React from \"react\";\n\nconst Component = ({ text: string }) =\u003e \u003ch1\u003e{text}\u003c/h1\u003e;\n\nexport const data = [\n  {\n    name: \"first tab\",\n    component: \u003cComponent text=\"Component One\" /\u003e,\n  },\n  {\n    name: \"second tab\",\n    component: \u003cComponent text=\"Component Two\" /\u003e,\n  },\n  {\n    name: \"third tab\",\n    component: \u003cComponent text=\"Component Three\" /\u003e,\n  },\n];\n```\n\nIt should have the `name` and `component` properties in it. The way you chose to structure it is completely up to you. But, it is important that you pass an array of objects to the `tabItems` props like so:\n\n```tsx\nimport { Tab } from \"react-tab-state\";\n\nexport default function HomePage() {\n  return (\n    \u003c\u003e\n      \u003cTab tabItems={data} /\u003e\n    \u003c/\u003e\n  );\n}\n```\n\nBecause you might wan to customize the look and feel of `tabHeader`. react-tab exposes a `theme` prop that accepts any color as a string depending on the design tokens that you're working with.\n\n```tsx\n\u003cTab tabItems={data} theme=\"brown\" /\u003e\n```\n\n## perks\n\n- state preservation any `tabItem` when you navigate away from and back to the current route.\n- you can copy the link in the URL share it and the state is shared across devices\n- I can't remember the last one....\n\n## setbacks\n\nBecause, the component uses `next/router` when you try using it outside of a Next.js project, you'll get an error indicating that \"NextRouter is not mounted\".\n\nSupport for react projects without Next.js should be up soon.\n\n## Want to contribute?\n\nSee the [CONTRIBUTING](CONTRIBUTING) guide.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaf-lamed-beyt%2Freact-tab","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkaf-lamed-beyt%2Freact-tab","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaf-lamed-beyt%2Freact-tab/lists"}