{"id":20283159,"url":"https://github.com/bsonntag/react-tabs","last_synced_at":"2025-04-11T08:21:27.909Z","repository":{"id":38201577,"uuid":"131635016","full_name":"bsonntag/react-tabs","owner":"bsonntag","description":"Flexible tab components for react","archived":false,"fork":false,"pushed_at":"2024-06-18T00:46:59.000Z","size":774,"stargazers_count":2,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-25T05:51:17.013Z","etag":null,"topics":["react","react-tabs","tabs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@bsonntag/react-tabs","language":"JavaScript","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/bsonntag.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}},"created_at":"2018-04-30T18:59:00.000Z","updated_at":"2024-01-12T18:06:29.000Z","dependencies_parsed_at":"2023-02-02T08:00:29.037Z","dependency_job_id":"cd1e8a0f-78cb-4d39-9444-b319922235e5","html_url":"https://github.com/bsonntag/react-tabs","commit_stats":{"total_commits":56,"total_committers":3,"mean_commits":"18.666666666666668","dds":0.4107142857142857,"last_synced_commit":"49829d7cb09ddece93868700323bc0210c60bcff"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bsonntag%2Freact-tabs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bsonntag%2Freact-tabs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bsonntag%2Freact-tabs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bsonntag%2Freact-tabs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bsonntag","download_url":"https://codeload.github.com/bsonntag/react-tabs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248360921,"owners_count":21090781,"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":["react","react-tabs","tabs"],"created_at":"2024-11-14T14:13:28.093Z","updated_at":"2025-04-11T08:21:27.890Z","avatar_url":"https://github.com/bsonntag.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @bsonntag/react-tabs\n\n[![CircleCI build](https://circleci.com/gh/bsonntag/react-tabs.svg?style=svg)](https://circleci.com/gh/bsonntag/react-tabs)\n\nFlexible tab components for react.\n\n## Installation\n\nUsing npm:\n\n```sh\n$ npm install --save @bsonntag/react-tabs\n```\n\nUsing yarn:\n\n```sh\n$ yarn add @bsonntag/react-tabs\n```\n\nThis module uses react's `createContext` API,\nso make sure you have at least version 16.3.0 installed.\n\n## Example usage\n\n```js\nimport { Tab, TabPanel, Tabs } from '@bsonntag/react-tabs';\nimport React, { Component } from 'react';\n\nclass App extends Component {\n\n  state = {\n    selectedTab: 0\n  };\n\n  handleSelect = selectedTab =\u003e this.setState({ selectedTab });\n\n  render() {\n    return (\n      \u003cTabs\n        onSelect={this.handleSelect}\n        selectedTab={this.state.selectedTab}\n      \u003e\n        \u003cul\u003e\n          \u003cTab tab={0}\u003e\n            {({ select }) =\u003e (\n              \u003cli onClick={select}\u003e\n                {'First tab'}\n              \u003c/li\u003e\n            )}\n          \u003c/Tab\u003e\n\n          \u003cTab tab={1}\u003e\n            {({ select }) =\u003e (\n              \u003cli onClick={select}\u003e\n                {'Second tab'}\n              \u003c/li\u003e\n            )}\n          \u003c/Tab\u003e\n        \u003c/ul\u003e\n\n        \u003cTabPanel tab={0}\u003e\n          {isSelected =\u003e isSelected \u0026\u0026 (\n            \u003cdiv\u003e\n              {'First tab content'}\n            \u003c/div\u003e\n          )}\n        \u003c/TabPanel\u003e\n\n        \u003cTabPanel tab={1}\u003e\n          {isSelected =\u003e isSelected \u0026\u0026 (\n            \u003cdiv\u003e\n              {'Second tab content'}\n            \u003c/div\u003e\n          )}\n        \u003c/TabPanel\u003e\n      \u003c/Tabs\u003e\n    );\n  }\n\n}\n```\n\n## Components\n\nThis module contains three components.\n\n### \u0026lt;Tabs /\u0026gt;\n\nWorks mainly as a provider. It only renders its children.\n\nThis is a\n[controlled component](https://reactjs.org/docs/forms.html#controlled-components),\nso you'll have to save the selected tab on another component's state.\n\n#### children: `React$Node`\n\nThis component only renders its children.\n\n#### onSelect: `(tab: string | number) =\u003e void`\n\nThe event handler that is called when a tab is selected.\nThis is called with the selected tab.\n\n#### selectedTab: `string | number`\n\nThe currently selected tab.\n\n### \u0026lt;Tab /\u0026gt;\n\n#### children: `(args: { isSelected: boolean, select: () =\u003e void }) =\u003e React$Node`\n\nThis component receives a function as its children.\nIt calls the children function with an object with two properties:\n\n- `isSelected`: this will be true if the tab is selected.\n- `select`: a function to call when this tab is selected.\n\nThis component will render the result of calling its children.\n\n#### tab: `string | number`\n\nThis tab's identifier.\n\n### \u0026lt;TabPanel /\u0026gt;\n\n#### children: `(isSelected: boolean) =\u003e React$Node`\n\nThis component receives a function as its children.\nIt calls the children function with an a boolean\nthat will be true if the tab is selected.\n\nThis component will render the result of calling its children.\n\n#### tab: `string | number`\n\nThis tab's identifier.\n\n## Contributing\n\nPlease feel free to submit any issues or pull requests.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbsonntag%2Freact-tabs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbsonntag%2Freact-tabs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbsonntag%2Freact-tabs/lists"}