{"id":20804406,"url":"https://github.com/sequencemedia/react-tab-set","last_synced_at":"2025-07-22T23:03:34.753Z","repository":{"id":35032573,"uuid":"101618857","full_name":"sequencemedia/react-tab-set","owner":"sequencemedia","description":"React Tab Set","archived":false,"fork":false,"pushed_at":"2025-07-20T03:11:17.000Z","size":12767,"stargazers_count":1,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-20T05:41:49.357Z","etag":null,"topics":["component","react","tabset"],"latest_commit_sha":null,"homepage":"https://github.com/sequencemedia/react-tab-set","language":"TypeScript","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/sequencemedia.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-08-28T07:59:28.000Z","updated_at":"2025-07-20T03:11:20.000Z","dependencies_parsed_at":"2023-01-16T23:15:43.317Z","dependency_job_id":"2d4d7796-c7b0-4f40-82ac-1e9f81053f07","html_url":"https://github.com/sequencemedia/react-tab-set","commit_stats":{"total_commits":957,"total_committers":3,"mean_commits":319.0,"dds":"0.027168234064785746","last_synced_commit":"05a923eef43bdc0a83bfa2b3747783fdee054ae8"},"previous_names":[],"tags_count":433,"template":false,"template_full_name":null,"purl":"pkg:github/sequencemedia/react-tab-set","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sequencemedia%2Freact-tab-set","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sequencemedia%2Freact-tab-set/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sequencemedia%2Freact-tab-set/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sequencemedia%2Freact-tab-set/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sequencemedia","download_url":"https://codeload.github.com/sequencemedia/react-tab-set/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sequencemedia%2Freact-tab-set/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266586905,"owners_count":23952205,"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","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"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":["component","react","tabset"],"created_at":"2024-11-17T19:09:13.347Z","updated_at":"2025-07-22T23:03:34.727Z","avatar_url":"https://github.com/sequencemedia.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-tab-set\n\nA `React` component for rendering tabbed content.\n\n```jsx\n\u003cTabSet selectedTab='one'\u003e\n  \u003cTabGroup\u003e\n    \u003cTab tab='one'\u003e\n      One\n    \u003c/Tab\u003e\n    \u003cTab tab='two'\u003e\n      Two\n    \u003c/Tab\u003e\n  \u003c/TabGroup\u003e\n  \u003cTabPanel tab='one'\u003e\n    One\n  \u003c/TabPanel\u003e\n  \u003cTabPanel tab='two'\u003e\n    Two\n  \u003c/TabPanel\u003e\n\u003c/TabSet\u003e\n```\n\nThe `\u003cTabSet /\u003e` component manages state, and applies additional props to the `\u003cTab /\u003e` and `\u003cTabPanel /\u003e` components.\n\n## _TabSet_\n\nRendered as a `\u003cdiv /\u003e` the `\u003cTabSet /\u003e` component can contain or be contained by an valid children or parent.\n\nA `\u003cTabSet /\u003e` has one prop, `selectedTab`. The value of that prop should be the same as the `tab` prop of a `\u003cTab /\u003e` and its paired `\u003cTabPanel /\u003e`.\n\n## _TabGroup_ and _Tab_\n\nA `\u003cTabGroup /\u003e` contains `\u003cTab /\u003e` components.\n\nThese are rendered as `\u003cul/\u003e` and `\u003cli /\u003e` elements, respectively; there should be no elements between them.\n\nA `\u003cTabGroup /\u003e` has no props.\n\nEach `\u003cTab /\u003e` component has one prop, `tab`. The value of that prop pairs with the `tab` prop of a `\u003cTabPanel /\u003e` component (such that when a `\u003cTab /\u003e` is selected with a click, its paired `\u003cTabPanel /\u003e` is rendered).\n\n## _TabPanel_\n\nA `\u003cTabPanel /\u003e` is a container for content.\n\nContent can be declared either as children or as the return of a function assigned to its prop `render`.\n\nIf your component extends `PureComponent` or is presentational, you might prefer to declare content as children.\n\nOtherwise, you can assign a function to the `render` prop, so that rendering is deferred until the tab is selected.\n\n### Content as children\n\n```jsx\n  \u003cTabPanel tab='identifier'\u003e\n    \u003cdiv className='content'\u003e\n      Content\n    \u003c/div\u003e\n  \u003c/TabPanel\u003e\n```\n\n### Content as return\n\n```jsx\n  \u003cTabPanel tab='identifier' render={() =\u003e (\n    \u003cdiv className='content'\u003e\n      Content\n    \u003c/div\u003e\n  )} /\u003e\n```\n\n(Notice that in this case there is no closing tag; if there were, children would be ignored in favour of the return from the function, anyway.)\n\n### Presentational elements\n\nA `\u003cTabPanel /\u003e` component can contain or be contained by an valid children or parent, just like a `\u003cTabSet /\u003e`.\n\n```jsx\n\u003cTabSet selectedTab='one'\u003e\n  { /*\n    Etc.\n  */ }\n  \u003cdiv className='a'\u003e\n    \u003cdiv className='b'\u003e\n      \u003cdiv className='c'\u003e\n        \u003cTabPanel tab='one'\u003e\n          One\n        \u003c/TabPanel\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cTabPanel tab='two' render={() =\u003e {\n    return 'Two'\n  }} /\u003e\n\u003c/TabSet\u003e\n```\n\nSimilarly, they can be declared in any combination.\n\n## Demonstrating _react-tab-set_\n\n[Example `Storybooks` are available](https://github.com/sequencemedia/react-tab-set).\n\nClone the repository, then:\n\n```bash\nnpm install\nnpm run storybook\n```\n\nAnd with your preferred browser visit `http://localhost:6006`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsequencemedia%2Freact-tab-set","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsequencemedia%2Freact-tab-set","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsequencemedia%2Freact-tab-set/lists"}