{"id":14972430,"url":"https://github.com/awran5/react-simple-tabs-component","last_synced_at":"2025-10-26T19:31:28.971Z","repository":{"id":57344754,"uuid":"311613087","full_name":"awran5/react-simple-tabs-component","owner":"awran5","description":"A simple react component for adding accessible easy-to-use Tabs to your project.","archived":false,"fork":false,"pushed_at":"2021-07-30T00:23:05.000Z","size":387,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-30T06:04:36.890Z","etag":null,"topics":["accessible-tabs","react-tabs","react-typescript","tabs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-simple-tabs-component","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/awran5.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-11-10T09:47:18.000Z","updated_at":"2022-05-07T12:50:57.000Z","dependencies_parsed_at":"2022-09-12T06:30:40.893Z","dependency_job_id":null,"html_url":"https://github.com/awran5/react-simple-tabs-component","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awran5%2Freact-simple-tabs-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awran5%2Freact-simple-tabs-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awran5%2Freact-simple-tabs-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awran5%2Freact-simple-tabs-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/awran5","download_url":"https://codeload.github.com/awran5/react-simple-tabs-component/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238394323,"owners_count":19464583,"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":["accessible-tabs","react-tabs","react-typescript","tabs"],"created_at":"2024-09-24T13:46:54.322Z","updated_at":"2025-10-26T19:31:23.530Z","avatar_url":"https://github.com/awran5.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Simple Tabs Component\n\n\u003e A simple react component for adding accessible easy-to-use Tabs to your project.\n\n[![NPM](https://img.shields.io/npm/v/react-simple-tabs-component.svg)](https://www.npmjs.com/package/react-simple-tabs-component)\n![npm bundle size](https://img.shields.io/bundlephobia/min/react-simple-tabs-component)\n![GitHub](https://img.shields.io/github/license/awran5/react-simple-tabs-component)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./screenshot.gif\" alt=\"screenshot\" width=\"100%\" /\u003e\n\u003c/p\u003e\n\n## Install\n\n```bash\n# npm\nnpm i react-simple-tabs-component\n\n# Yarn\nyarn add react-simple-tabs-component\n```\n\n## Usage\n\n```jsx\nimport { Tabs } from 'react-simple-tabs-component'\n// (Optional) if you don't want to include bootstrap css stylesheet\nimport 'react-simple-tabs-component/dist/index.css'\n\n// Component Example\nconst TabOne = () =\u003e {\n  return (\n    \u003c\u003e\n      \u003ch3\u003eTab One\u003c/h3\u003e\n      \u003cp\u003e\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis sint illum iusto nostrum cumque qui\n        voluptas tenetur inventore ut quis?\n      \u003c/p\u003e\n    \u003c/\u003e\n  )\n}\n\n// Tabs structure Array\nconst tabs = [\n  {\n    label: 'Tab One', // Tab Title - String\n    Component: TabOne // Tab Body - JSX.Element\n  },\n  {\n    label: 'Tab Two',\n    Component: TabTwo\n  },\n  {\n    label: 'Tab Three',\n    Component: TabThree\n  }\n]\n\nexport default function App() {\n  return (\n    \u003cdiv className='App'\u003e\n\n      \u003cTabs tabs={tabs} /* Props */ /\u003e\n    \u003c/div\u003e\n  )\n```\n\n### Available Props\n\n| Prop          | Type             | Options  | Description                               |          Default           |\n| ------------- | ---------------- | -------- | ----------------------------------------- | :------------------------: |\n| `tabs`        | Array of objects | Required | Array of objects for your Tabs            |            `-`             |\n| `orientation` | String           | Optional | Tab orientation `horizontal` - `vertical` |        `horizontal`        |\n| `type`        | String           | Optional | Tabs type `tabs` - `pills`                |           `tabs`           |\n| `className`   | String           | Optional | A className applied to the main `div`     | `bootstrap-tabs-component` |\n\n---\n\n## Style\n\nThe Component is based on Bootstrap 5 `HTML` structure and `CSS` classes so it will work out of the box if Bootstrap 5 css stylesheet is already included in you project. If you don't have/want to include Bootstrap, you still can use a `standalone` css stylesheet which was extracted form bootstrap 5 stylesheet. Just add it:\n\n```jsx\nimport 'react-simple-tabs-component/dist/index.css'\n```\n\n\u003cbr /\u003e\n\n[![Edit react-typescript-tabs (forked)](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-typescript-tabs-forked-0txii?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n### License\n\nMIT © [awran5](https://github.com/awran5/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fawran5%2Freact-simple-tabs-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fawran5%2Freact-simple-tabs-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fawran5%2Freact-simple-tabs-component/lists"}