{"id":19444170,"url":"https://github.com/yazaabed/react-tabs","last_synced_at":"2025-07-18T16:35:11.273Z","repository":{"id":38174896,"uuid":"130062138","full_name":"yazaabed/react-tabs","owner":"yazaabed","description":"Simple React Tabs using the new react ContextAPI","archived":false,"fork":false,"pushed_at":"2023-04-24T01:34:07.000Z","size":2140,"stargazers_count":17,"open_issues_count":9,"forks_count":7,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-30T19:51:50.304Z","etag":null,"topics":["components","react","react-tabs","reactjs","rollup-example","state-management","storybook","tabs"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/frosty-pond-etcqj?file=/src/App.js","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/yazaabed.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}},"created_at":"2018-04-18T12:54:38.000Z","updated_at":"2024-02-16T19:43:22.000Z","dependencies_parsed_at":"2024-11-10T16:15:49.292Z","dependency_job_id":null,"html_url":"https://github.com/yazaabed/react-tabs","commit_stats":null,"previous_names":["yazanaabeed/react-tabs"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/yazaabed/react-tabs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yazaabed%2Freact-tabs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yazaabed%2Freact-tabs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yazaabed%2Freact-tabs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yazaabed%2Freact-tabs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yazaabed","download_url":"https://codeload.github.com/yazaabed/react-tabs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yazaabed%2Freact-tabs/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265793643,"owners_count":23829177,"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":["components","react","react-tabs","reactjs","rollup-example","state-management","storybook","tabs"],"created_at":"2024-11-10T16:05:24.445Z","updated_at":"2025-07-18T16:35:11.250Z","avatar_url":"https://github.com/yazaabed.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Tabs\n\u003e Simple React Tabs using the new react ContextAPI to manage changes active tabs or not. And there is no need to add tabs container you just add a tab component.\n\n[![npm](https://img.shields.io/npm/v/@feuer/react-tabs.svg?style=flat-square)](https://www.npmjs.com/package/@feuer/react-tabs)\n[![npm License](https://img.shields.io/npm/l/@feuer/react-tabs.svg?style=flat-square)](https://github.com/yazaabed/react-tabs)\n[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg?style=flat-square)](https://conventionalcommits.org)\n\n[![GitHub contributors](https://img.shields.io/github/contributors/yazaabed/react-tabs.svg?style=flat-square)](https://github.com/yazaabed/react-tabs)\n[![GitHub stars](https://img.shields.io/github/stars/yazaabed/react-tabs.svg?label=GitHub%20Stars\u0026style=flat-square)](https://github.com/yazaabed/react-tabs)\n[![npm Downloads](https://img.shields.io/npm/dw/@feuer/react-tabs.svg?style=flat-square)](https://www.npmjs.com/package/@feuer/react-tabs)\n\n# Demo\n- For quick demo please checkout this [storybook](https://feuer-ui.netlify.app/).\n- For quick code usage pelase checkout this [codesandbox](https://codesandbox.io/s/frosty-pond-etcqj?file=/src/App.js)\n\n## Introduction\nThis project done using ReactJS and normal styling to add a small react-tabs component to your project without a huge library.\n\n## Installation\nThis module is distributed via npm which is bundled with node and should be installed as one of your project's dependencies:\n\n### Yarn\n```\nyarn add @feuer/react-tabs\n```\n\n### Npm\n```\nnpm install @feuer/react-tabs\n```\n\nThis package also depends on `react`, `tslib` only esm for umd its already included, `react-dom`, `prop-types`. Please make sure you have it installed as well.\n\n## Usage\n\n### [Try it out in the browser](https://codesandbox.io/s/frosty-pond-etcqj?file=/src/App.js)\n\n```jsx\nimport React from \"react\";\nimport { Tabs } from \"@feuer/react-tabs\";\n\nconst styles = {\n  fontFamily: \"sans-serif\",\n  textAlign: \"center\"\n};\n\nconst LeftTabs = () =\u003e (\n  \u003cdiv style={styles}\u003e\n    \u003cTabs\n      activeTab={{\n        id: \"tab1\"\n      }}\n    \u003e\n      \u003cTabs.Tab id=\"tab1\" title=\"Tab 1\"\u003e\n        \u003cdiv style={{ padding: 10 }}\u003e\n          This is tab 1\n        \u003c/div\u003e\n      \u003c/Tabs.Tab\u003e\n      \u003cTabs.Tab id=\"tab2\" title=\"Tab 2\"\u003e\n        \u003cdiv style={{ padding: 10 }}\u003e\n          This is tab 2\n        \u003c/div\u003e\n      \u003c/Tabs.Tab\u003e\n    \u003c/Tabs\u003e\n  \u003c/div\u003e\n);\n```\n\n## Basic Props\nThis is the list of props that you should probably know about when using react-tabs.\n\n### Tabs Component Props\n\n```javascript\nTabs.propTypes = {\n  activeTab: {\n    id: PropTypes.string.isRequired,\n  },\n  children: PropTypes.arrayOf(PropTypes.node).isRequired,\n  tabsProps: {\n    style: PropTypes.object,\n    className: PropTypes.string\n  }\n};\n```\n\n### Tab Component Props\n\n```javascript\nTab.propTypes = {\n  id: PropTypes.string.isRequired,\n  title: PropTypes.string.isRequired,\n  tabIndex: PropTypes.oneOf([PropTypes.string, PropTypes.number])\n};\n```\n\n## Contributing\n\nPlease read [CONTRIBUTING.md](https://gist.github.com/PurpleBooth/b24679402957c63ec426) for details on our code of conduct, and the process for submitting pull requests to us.\n\n## Versioning\n\nWe use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/your/project/tags). \n\n## Authors\n\n* **Yazan Aabed**\n* See also the list of [contributors](https://github.com/yazaabed/react-tabs/graphs/contributors) who participated in this project.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyazaabed%2Freact-tabs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyazaabed%2Freact-tabs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyazaabed%2Freact-tabs/lists"}