{"id":23330643,"url":"https://github.com/techlab/react-smarttab","last_synced_at":"2025-08-23T00:31:06.659Z","repository":{"id":40669038,"uuid":"271846640","full_name":"techlab/react-smarttab","owner":"techlab","description":"The awesome react tab component for ReactJS","archived":false,"fork":false,"pushed_at":"2024-01-29T17:30:37.000Z","size":2807,"stargazers_count":4,"open_issues_count":10,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-05-01T20:45:09.751Z","etag":null,"topics":["javascript","react","react-component","react-tabs","smarttab","tab","tablayout","ui-components"],"latest_commit_sha":null,"homepage":"http://techlaboratory.net/react-smarttab","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/techlab.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["https://www.paypal.me/dipuraj"]}},"created_at":"2020-06-12T16:46:28.000Z","updated_at":"2022-02-15T03:41:42.000Z","dependencies_parsed_at":"2024-02-25T23:38:41.054Z","dependency_job_id":"65366268-619c-48cd-9135-bfddab5cc980","html_url":"https://github.com/techlab/react-smarttab","commit_stats":{"total_commits":5,"total_committers":2,"mean_commits":2.5,"dds":"0.19999999999999996","last_synced_commit":"af820a345f0a2b686586ba9d5a25e90f9848cebe"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techlab%2Freact-smarttab","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techlab%2Freact-smarttab/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techlab%2Freact-smarttab/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techlab%2Freact-smarttab/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/techlab","download_url":"https://codeload.github.com/techlab/react-smarttab/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230651181,"owners_count":18259375,"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":["javascript","react","react-component","react-tabs","smarttab","tab","tablayout","ui-components"],"created_at":"2024-12-20T22:20:10.369Z","updated_at":"2024-12-20T22:20:11.185Z","avatar_url":"https://github.com/techlab.png","language":"JavaScript","readme":"# React Smart Tab\n#### The awesome react tab component for ReactJS\n\n[![Build Status](https://travis-ci.org/techlab/react-smarttab.svg?branch=master)](https://travis-ci.org/techlab/react-smarttab)\n[![npm version](https://badge.fury.io/js/react-smarttab.svg)](https://badge.fury.io/js/react-smarttab)\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/techlab/react-smarttab/master/LICENSE)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n[![Donate on Paypal](https://img.shields.io/badge/PayPal-dipuraj-blue.svg)](https://www.paypal.me/dipuraj)\n\nReact Smart Tab is a React component library for easy implementation of tab interface.\n\n\u003e If you think it is cool, you should also check it's sibling [jQuery Smart Tab](http://techlaboratory.net/jquery-smarttab)\n\n+ [Homepage](http://techlaboratory.net/react-smarttab)\n+ [Documentation](http://techlaboratory.net/react-smarttab#documentation)\n+ [Demos](http://techlaboratory.net/react-smarttab#demo)\n+ [GitHub Issues](https://github.com/techlab/react-smarttab/issues)\n\nScreenshots\n-----\n![jQuery Smart Tab pills](http://techlaboratory.net/assets/media/react-smart-tab/react-smarttab-v2-pills.png)   \n\n![jQuery Smart Tab dark vertical](http://techlaboratory.net/assets/media/react-smart-tab/react-smarttab-v2-dark-vertical.png)   \n\n![jQuery Smart Tab default](http://techlaboratory.net/assets/media/react-smart-tab/react-smarttab-v2-default.png)   \n\n![jQuery Smart Tab brick](http://techlaboratory.net/assets/media/react-smart-tab/react-smarttab-v2-brick.png)\n\n\nInstallation\n-----\n\n### [NPM](https://www.npmjs.com/package/react-smarttab)\n```bash\nnpm install react-smarttab --save\n```\n\n### [Yarn](https://yarn.pm/react-smarttab)\n```bash\nyarn add react-smarttab\n```   \n\nFeatures\n-----\n\n+ Responsive design\n+ Standalone CSS\n+ Bootstrap compatible\n+ Various themes included\n+ Customizable CSS\n+ Supports all modern browsers\n+ Easy to implement\n+ Callback event support\n\nUsage\n-----\n\n```jsx\nimport React from 'react'\n\nimport { Tabs, TabNav, TabNavItem, TabContent, TabPanel } from 'react-smarttab'\nimport 'react-smarttab/dist/index.css'\n\nconst App = () =\u003e {\n\n  return (\n    \u003cTabs\u003e\n      \u003cTabNav\u003e\n        \u003cTabNavItem\u003eTab 1\u003c/TabNavItem\u003e\n        \u003cTabNavItem\u003eTab 2\u003c/TabNavItem\u003e\n        \u003cTabNavItem\u003eTab 3\u003c/TabNavItem\u003e\n        \u003cTabNavItem\u003eTab 4\u003c/TabNavItem\u003e\n      \u003c/TabNav\u003e\n\n      \u003cTabContent\u003e\n        \u003cTabPanel\u003e\n          Tab 1 Content\n        \u003c/TabPanel\u003e\n        \u003cTabPanel\u003e\n          Tab 2 Content\n        \u003c/TabPanel\u003e\n        \u003cTabPanel\u003e\n          Tab 3 Content\n        \u003c/TabPanel\u003e\n        \u003cTabPanel\u003e\n          Tab 4 Content\n        \u003c/TabPanel\u003e\n      \u003c/TabContent\u003e\n    \u003c/Tabs\u003e  \n  )\n}\n\nexport default App\n```\n\nPlease see the [documentation](http://techlaboratory.net/react-smarttab#documentation) for more details on implementation and usage.  \n\n##### Optional parameters\n\nPlease see the [parameter descriptions](http://techlaboratory.net/react-smarttab#parameter-description) for more details.\n\n```jsx\nimport React from 'react'\n\nimport { Tabs, TabNav, TabNavItem, TabContent, TabPanel } from 'react-smarttab'\nimport 'react-smarttab/dist/index.css'\n\nconst App = () =\u003e {\n\n  return (\n    \u003cTabs\n    tabName='tab1'\n    selected='0'\n    theme='dark'\n    orientation='horizontal\n    justified='true'\n    enableURLhash={true}\n    onLeaveTab={(currentIndex, nextIndex) =\u003e { console.log(\"leaveTab\", currentIndex, nextIndex) }}\n    onShowTab={(e) =\u003e { console.log(\"showTab\", e) }}\n    \u003e\n      \u003cTabNav\u003e\n        \u003cTabNavItem\u003eTab 1\u003c/TabNavItem\u003e\n        \u003cTabNavItem\u003eTab 2\u003c/TabNavItem\u003e\n        \u003cTabNavItem\u003eTab 3\u003c/TabNavItem\u003e\n        \u003cTabNavItem\u003eTab 4\u003c/TabNavItem\u003e\n      \u003c/TabNav\u003e\n\n      \u003cTabContent\u003e\n        \u003cTabPanel\u003e\n          Tab 1 Content\n        \u003c/TabPanel\u003e\n        \u003cTabPanel\u003e\n          Tab 2 Content\n        \u003c/TabPanel\u003e\n        \u003cTabPanel\u003e\n          Tab 3 Content\n        \u003c/TabPanel\u003e\n        \u003cTabPanel\u003e\n          Tab 4 Content\n        \u003c/TabPanel\u003e\n      \u003c/TabContent\u003e\n    \u003c/Tabs\u003e  \n  )\n}\n\nexport default App\n```\n\nLicense\n----\n[MIT License](https://github.com/techlab/react-smarttab/blob/master/LICENSE)\n\nContribute\n----\nIf you like the project please support with your contribution.\n\n[Donate on Paypal](https://www.paypal.me/dipuraj)\n\nThank you and Happy Coding!\n","funding_links":["https://www.paypal.me/dipuraj"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechlab%2Freact-smarttab","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftechlab%2Freact-smarttab","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechlab%2Freact-smarttab/lists"}