{"id":13403881,"url":"https://github.com/reactjs/react-tabs","last_synced_at":"2026-01-12T02:25:20.017Z","repository":{"id":18663322,"uuid":"21871245","full_name":"reactjs/react-tabs","owner":"reactjs","description":"An accessible and easy tab component for ReactJS.","archived":false,"fork":false,"pushed_at":"2025-12-23T21:46:18.000Z","size":18203,"stargazers_count":3147,"open_issues_count":56,"forks_count":450,"subscribers_count":40,"default_branch":"main","last_synced_at":"2025-12-25T11:38:01.168Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://reactcommunity.org/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/reactjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":["danez"]}},"created_at":"2014-07-15T18:34:32.000Z","updated_at":"2025-12-23T21:46:22.000Z","dependencies_parsed_at":"2023-10-15T05:15:13.068Z","dependency_job_id":"402b078f-2916-46c4-85f6-29c52213d33d","html_url":"https://github.com/reactjs/react-tabs","commit_stats":{"total_commits":1807,"total_committers":74,"mean_commits":24.41891891891892,"dds":0.6159380188157166,"last_synced_commit":"c1e928d74dbb67a3c0f192dca0c9b8d3d970957e"},"previous_names":["mzabriskie/react-tabs","rackt/react-tabs"],"tags_count":55,"template":false,"template_full_name":null,"purl":"pkg:github/reactjs/react-tabs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactjs%2Freact-tabs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactjs%2Freact-tabs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactjs%2Freact-tabs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactjs%2Freact-tabs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reactjs","download_url":"https://codeload.github.com/reactjs/react-tabs/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactjs%2Freact-tabs/sbom","scorecard":{"id":49173,"data":{"date":"2025-08-04","repo":{"name":"github.com/reactjs/react-tabs","commit":"b8f868802a4d0099b7461f48560754e7a667a9d3"},"scorecard":{"version":"v5.2.1-28-gc1d103a9","commit":"c1d103a9bb9f635ec7260bf9aa0699466fa4be0e"},"score":5.5,"checks":[{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#binary-artifacts"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#packaging"}},{"name":"Maintained","score":10,"reason":"30 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 10","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#maintained"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:47: update your workflow using https://app.stepsecurity.io/secureworkflow/reactjs/react-tabs/build.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/build.yml:50: update your workflow using https://app.stepsecurity.io/secureworkflow/reactjs/react-tabs/build.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:53: update your workflow using https://app.stepsecurity.io/secureworkflow/reactjs/react-tabs/build.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:77: update your workflow using https://app.stepsecurity.io/secureworkflow/reactjs/react-tabs/build.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/build.yml:82: update your workflow using https://app.stepsecurity.io/secureworkflow/reactjs/react-tabs/build.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:85: update your workflow using https://app.stepsecurity.io/secureworkflow/reactjs/react-tabs/build.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/reactjs/react-tabs/build.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/build.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/reactjs/react-tabs/build.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/reactjs/react-tabs/build.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/build.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/reactjs/react-tabs/build.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:39: update your workflow using https://app.stepsecurity.io/secureworkflow/reactjs/react-tabs/codeql-analysis.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/reactjs/react-tabs/codeql-analysis.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:54: update your workflow using https://app.stepsecurity.io/secureworkflow/reactjs/react-tabs/codeql-analysis.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:68: update your workflow using https://app.stepsecurity.io/secureworkflow/reactjs/react-tabs/codeql-analysis.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/lock.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/reactjs/react-tabs/lock.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ossar-analysis.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/reactjs/react-tabs/ossar-analysis.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ossar-analysis.yml:46: update your workflow using https://app.stepsecurity.io/secureworkflow/reactjs/react-tabs/ossar-analysis.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ossar-analysis.yml:51: update your workflow using https://app.stepsecurity.io/secureworkflow/reactjs/react-tabs/ossar-analysis.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pkg-size-report.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/reactjs/react-tabs/pkg-size-report.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/pkg-size-report.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/reactjs/react-tabs/pkg-size-report.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pkg-size-report.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/reactjs/react-tabs/pkg-size-report.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/pkg-size-report.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/reactjs/react-tabs/pkg-size-report.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/website.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/reactjs/react-tabs/website.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/website.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/reactjs/react-tabs/website.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/website.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/reactjs/react-tabs/website.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/website.yml:45: update your workflow using https://app.stepsecurity.io/secureworkflow/reactjs/react-tabs/website.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/website.yml:48: update your workflow using https://app.stepsecurity.io/secureworkflow/reactjs/react-tabs/website.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/website.yml:51: update your workflow using https://app.stepsecurity.io/secureworkflow/reactjs/react-tabs/website.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/website.yml:63: update your workflow using https://app.stepsecurity.io/secureworkflow/reactjs/react-tabs/website.yml/main?enable=pin","Info:   0 out of  19 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of  10 third-party GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#pinned-dependencies"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: jobLevel 'contents' permission set to 'write': .github/workflows/website.yml:42","Info: found token with 'none' permissions: .github/workflows/build.yml:1","Warn: no topLevel permission defined: .github/workflows/codeql-analysis.yml:1","Warn: no topLevel permission defined: .github/workflows/ossar-analysis.yml:1","Info: found token with 'none' permissions: .github/workflows/website.yml:1"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#token-permissions"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#code-review"}},{"name":"SAST","score":10,"reason":"SAST tool detected: CodeQL","details":["Info: SAST configuration detected: CodeQL","Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#sast"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-14T23:22:55.267Z","repository_id":18663322,"created_at":"2025-08-14T23:22:55.267Z","updated_at":"2025-08-14T23:22:55.267Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28332336,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-12T00:36:25.062Z","status":"online","status_checked_at":"2026-01-12T02:00:08.677Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","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":[],"created_at":"2024-07-30T19:01:35.830Z","updated_at":"2026-01-12T02:25:19.982Z","avatar_url":"https://github.com/reactjs.png","language":"JavaScript","readme":"# react-tabs [![npm version](https://img.shields.io/npm/v/react-tabs.svg)](https://www.npmjs.com/package/react-tabs) [![Coverage Status](https://coveralls.io/repos/github/reactjs/react-tabs/badge.svg?branch=main)](https://coveralls.io/github/reactjs/react-tabs?branch=main)\n\nAn accessible and easy tab component for ReactJS.\n\nhttps://reactcommunity.org/react-tabs/\n\n\u003e Version 5 or newer of `react-tabs` needs react version 18 or newer\n\u003e\n\u003e Version 4 of `react-tabs` needs react version 16.8 or newer\n\n\u003cins\u003e\u003cblockquote class=\"rich-diff-level-zero\"\u003e \u003cp class=\"rich-diff-level-one\"\u003ereact-tabs was tested on real mobile devices and browsers with\u003cbr\u003e\n\u003cimg src=\"./examples/src/images/Browserstack-logo.svg\" height=\"50\" alt=\"Browserstack\"\u003e\n\n\u003c/p\u003e \u003c/blockquote\u003e\u003c/ins\u003e\n\n## Installing\n\n```bash\nyarn add react-tabs\n```\n\nor\n\n```bash\nnpm install --save react-tabs\n```\n\n## Basic Example\n\n```js\nimport { Tab, Tabs, TabList, TabPanel } from 'react-tabs';\nimport 'react-tabs/style/react-tabs.css';\n\nexport default () =\u003e (\n  \u003cTabs\u003e\n    \u003cTabList\u003e\n      \u003cTab\u003eTitle 1\u003c/Tab\u003e\n      \u003cTab\u003eTitle 2\u003c/Tab\u003e\n    \u003c/TabList\u003e\n\n    \u003cTabPanel\u003e\n      \u003ch2\u003eAny content 1\u003c/h2\u003e\n    \u003c/TabPanel\u003e\n    \u003cTabPanel\u003e\n      \u003ch2\u003eAny content 2\u003c/h2\u003e\n    \u003c/TabPanel\u003e\n  \u003c/Tabs\u003e\n);\n```\n\n## API\n\n## Components\n\nreact-tabs consists of 4 components which all need to be used together.\n\n### \u0026lt;Tabs /\u0026gt;\n\nIf you specify additional props on the `\u003cTabs /\u003e` component they will be forwarded to the rendered `\u003cdiv /\u003e`.\n\n#### className: `string | Array\u003cstring\u003e | { [string]: boolean }`\n\n\u003e default: `\"react-tabs\"`\n\nProvide a custom class name for the outer `\u003cdiv /\u003e` of the tabs.\n\n\u003e You can also supply an array of class names or an object where the class names are the key and the value is a boolean indicating if the name should be added. See the docs of [classnames](https://github.com/JedWatson/classnames#usage) on how to supply different class names.\n\n#### defaultFocus: `boolean`\n\n\u003e default: `false`\n\nIf set to `true` the tabs will be focused on initial render. This allows immediate use of keyboard keys to switch tabs after the first render.\n\n#### defaultIndex: `number`\n\n\u003e default: `0`\n\nThis allows changing the tab that should be open on initial render. This is a zero-based index, so first tab is `0`, second tab is `1`, ...\n\n\u003e This can only be used in uncontrolled mode when react-tabs handles the current selected tab internally and for this reason cannot be used together with `selectedIndex`. See [here](#controlled-vs-uncontrolled-mode) for more info on modes.\n\n#### direction: `string`\n\n\u003e default: `\"ltr\"`\n\nProvide the direction of the component, can be either rtl or ltr.\n\n#### disabledTabClassName: `string`\n\n\u003e default: `\"react-tabs__tab--disabled\"`\n\nProvide a custom class name for disabled tabs.\n\n\u003e This option can also be set directly at the `\u003cTab /\u003e` component.\n\n#### disableUpDownKeys: `bool`\n\n\u003e default: `false`\n\nDisable up \u0026 down arrow keys to change tabs.\n\n#### domRef: `(node: ?HTMLElement) =\u003e void`\n\n\u003e default: `null`\n\nRegister a callback that will receive the underlying DOM node for every mount. It will also receive null on unmount.\n\n#### environment: `Window`\n\nIf you're rendering `react-tabs` within a different `window` context than the default one; for example, an iframe.\n\n#### focusTabOnClick: `boolean`\n\n\u003e default: `true`\n\nBy default the tab that is clicked will also be focused in the DOM. If set to `false` the tab will not be focused anymore.\n\n\u003e Be aware that keyboard navigation will not work after click if set to false. Though one can still focus the tabs by pressing `tab` and then keyboard navigation will work.\n\n#### forceRenderTabPanel: `boolean`\n\n\u003e default: `false`\n\nBy default only the current active tab will be rendered to DOM. If set to `true` all tabs will be rendered to the DOM always.\n\n\u003e This can also be enabled for each individual `\u003cTabPanel /\u003e` component with its prop `forceRender`.\n\n#### onSelect: `(index: number, lastIndex: number, event: Event) =\u003e ?boolean`\n\n\u003e default: `undefined`\n\nThis event handler is called every time a tab is about to change. It will be called with the `index` that it will be changed to, the `lastIndex` which was selected before and the underlying `event` which is usually either a `keydown` or `click` event. When `index` and `lastIndex` are equal it means the user clicked on the currently active tab.\n\nThe callback can optionally return `false` to cancel the change to the new tab.\n\n\u003e Returning `false` when the change to the new tab should be canceled is also important in controlled mode, as react-tabs still internally handles the focus of the tabs.\n\n\u003e In controlled mode the `onSelect` handler is a required prop.\n\n#### selectedIndex: `number`\n\n\u003e default: `null`\n\nSet the currently selected tab. This is a zero-based index, so first tab is `0`, second tab is `1`, ...\n\nThis enables controlled mode, which also requires `onSelect` to be set. See [here](#controlled-vs-uncontrolled-mode) for more info on modes.\n\n#### selectedTabClassName: `string`\n\n\u003e default: `\"react-tabs__tab--selected\"`\n\nProvide a custom class name for the active tab.\n\n\u003e This option can also be set directly at the `\u003cTab /\u003e` component.\n\n#### selectedTabPanelClassName: `string`\n\n\u003e default: `\"react-tabs__tab-panel--selected\"`\n\nProvide a custom class name for the active tab panel.\n\n\u003e This option can also be set directly at the `\u003cTabPanel /\u003e` component.\n\n### \u0026lt;TabList /\u0026gt;\n\nIf you specify additional props on the `\u003cTabList /\u003e` component they will be forwarded to the rendered `\u003cul /\u003e`.\n\n#### className: `string | Array\u003cstring\u003e | { [string]: boolean }`\n\n\u003e default: `\"react-tabs__tab-list\"`\n\nProvide a custom class name for the `\u003cul /\u003e`.\n\n\u003e You can also supply an array of class names or an object where the class names are the key and the value is a boolean indicating if the name should be added. See the docs of [classnames](https://github.com/JedWatson/classnames#usage) on how to supply different class names.\n\n### \u0026lt;Tab /\u0026gt;\n\nIf you specify additional props on the `\u003cTab /\u003e` component they will be forwarded to the rendered `\u003cli /\u003e`.\n\n#### className: `string | Array\u003cstring\u003e | { [string]: boolean }`\n\n\u003e default: `\"react-tabs__tab\"`\n\nProvide a custom class name for the `\u003cli /\u003e`.\n\n\u003e You can also supply an array of class names or an object where the class names are the key and the value is a boolean indicating if the name should be added. See the docs of [classnames](https://github.com/JedWatson/classnames#usage) on how to supply different class names.\n\n#### disabled: `boolean`\n\n\u003e default: `false`\n\nDisable this tab which will make it not do anything when clicked. Also a disabled class name will be added (see `disabledClassName`)\n\n#### disabledClassName: `string`\n\n\u003e default: `\"react-tabs__tab--disabled\"`\n\nProvide a custom class name for disabled tabs.\n\n\u003e This option can also be set for all `\u003cTab /\u003e` components with the prop `disabledTabClassName` on `\u003cTabs /\u003e`.\n\n#### selectedClassName: `string`\n\n\u003e default: `\"react-tabs__tab--selected\"`\n\nProvide a custom class name for the active tab.\n\n\u003e This option can also be set for all `\u003cTab /\u003e` components with the prop `selectedTabClassName` on `\u003cTabs /\u003e`.\n\n#### tabIndex: `string`\n\n\u003e default: if selected `\"0\"` otherwise `null`\n\nOverrides the tabIndex to enabled tabbing between tabs.\n\n### \u0026lt;TabPanel /\u0026gt;\n\nIf you specify additional props on the `\u003cTabPanel /\u003e` component they will be forwarded to the rendered `\u003cdiv /\u003e`.\n\n#### className: `string | Array\u003cstring\u003e | { [string]: boolean }`\n\n\u003e default: `\"react-tabs__tab-panel\"`\n\nProvide a custom class name for the `\u003cdiv /\u003e` containing the tab content.\n\n\u003e You can also supply an array of class names or an object where the class names are the key and the value is a boolean indicating if the name should be added. See the docs of [classnames](https://github.com/JedWatson/classnames#usage) on how to supply different class names.\n\n#### forceRender: `boolean`\n\n\u003e default: `false`\n\nBy default the tab content will only be rendered when the tab is active. If set to `true` the tab will also be rendered if inactive.\n\n\u003e This can also be enabled for all `\u003cTabPanel /\u003e` components with the prop `forceRenderTabPanel` on `\u003cTabs /\u003e`.\n\n#### selectedClassName: `string`\n\n\u003e default: `\"react-tabs__tab-panel--selected\"`\n\nProvide a custom class name for the active tab panel.\n\n\u003e This option can also be set for all `\u003cTabPanel /\u003e` components with the prop `selectedTabPanelClassName` on `\u003cTabs /\u003e`.\n\n## Controlled vs Uncontrolled mode\n\nReact tabs has two different modes it can operate in, which change the way how much you need to take care about the state yourself.\n\n### Uncontrolled mode\n\nThis is the default mode of react-tabs and makes the react-tabs components handle its state internally. You can change the starting tab with `defaultIndex` and you can listen for changes with `onSelect`.\n\nIn this mode you cannot force a tab change during runtime.\n\n```js\n\u003cTabs defaultIndex={1} onSelect={(index) =\u003e console.log(index)}\u003e\n  \u003cTabList\u003e\n    \u003cTab\u003eTitle 1\u003c/Tab\u003e\n    \u003cTab\u003eTitle 2\u003c/Tab\u003e\n  \u003c/TabList\u003e\n  \u003cTabPanel\u003e\u003c/TabPanel\u003e\n  \u003cTabPanel\u003e\u003c/TabPanel\u003e\n\u003c/Tabs\u003e\n```\n\n### Controlled mode\n\nThis mode has to be enabled by supplying `selectedIndex` to the `\u003cTabs /\u003e` component.\n\nIn this mode react-tabs does not handle any tab selection state internally and leaves all the state management up to the outer application.\n\nThis mode also enforces you to set a handler for `onSelect`. `defaultIndex` does not have any effect and will therefore throw an error.\n\n```js\nconst App = () =\u003e {\n  const [tabIndex, setTabIndex] = useState(0);\n\n  return (\n    \u003cTabs selectedIndex={tabIndex} onSelect={(index) =\u003e setTabIndex(index)}\u003e\n      \u003cTabList\u003e\n        \u003cTab\u003eTitle 1\u003c/Tab\u003e\n        \u003cTab\u003eTitle 2\u003c/Tab\u003e\n      \u003c/TabList\u003e\n      \u003cTabPanel\u003e\u003c/TabPanel\u003e\n      \u003cTabPanel\u003e\u003c/TabPanel\u003e\n    \u003c/Tabs\u003e\n  );\n};\n```\n\n## Styling\n\nreact-tabs does not include any style loading by default. Default stylesheets are provided and can be included in your application if desired.\n\n### Webpack\n\nWhen using webpack and an appropriate loader (`css-loader`, `sass-loader`, `less-loader` or `style-loader`) you can simply import the default stylesheet.\n\n```js\nimport 'react-tabs/style/react-tabs.css';\n// or\nimport 'react-tabs/style/react-tabs.scss';\n// or\nimport 'react-tabs/style/react-tabs.less';\n```\n\n### SASS\n\nWhen using SASS you can easily import the default styles\n\n```scss\n@import '../../path/to/node_modules/react-tabs/style/react-tabs.scss';\n```\n\n### LESS\n\nWhen using LESS you can easily import the default styles\n\n```scss\n@import '../../path/to/node_modules/react-tabs/style/react-tabs.less';\n```\n\n### Custom Style\n\nYou can also always just simply copy the default style to your own css/scss/less and modify it to your own needs. The changelog will always tell you when classes change and we also consider changes that break the styling as semver major.\n\n### Custom Components\n\n#### Set `tabsRole`\n\nIn case you want to create your own component wrapping the ones that the library provides, you have to set its `tabsRole`. This value is used inside react-tabs to check the role of a component inside `\u003cTabs /\u003e`.\n\nPossible values for tabsRole are:\n\n- Tab\n- TabPanel\n- TabList\n- Tabs\n\n#### Pass through properties\n\nNote: Because of how react-tabs works internally (it uses cloning to opaquely control various parts of the tab state), you need to pass any incoming props to the component you're wrapping. The easiest way to do this is to use the rest and spread operators, e.g. see `{...otherProps}` below.\n\n```tsx\nimport { Tabs, TabList, Tab, TabPanel } from 'react-tabs';\nimport type { ReactTabsFunctionComponent, TabProps } from 'react-tabs';\n\n// All custom elements should pass through other props\nconst CustomTab: ReactTabsFunctionComponent\u003cTabProps\u003e = ({\n  children,\n  ...otherProps\n}) =\u003e (\n  \u003cTab {...otherProps}\u003e\n    \u003ch1\u003e{children}\u003c/h1\u003e\n  \u003c/Tab\u003e\n);\n\nCustomTab.tabsRole = 'Tab'; // Required field to use your custom Tab\n\nconst App = () =\u003e (\n  \u003cTabs\u003e\n    \u003cTabList\u003e\n      \u003cCustomTab\u003eCustom Tab 1\u003c/CustomTab\u003e\n      \u003cCustomTab\u003eCustom Tab 2\u003c/CustomTab\u003e\n    \u003c/TabList\u003e\n    \u003cTabPanel\u003ePanel 1\u003c/TabPanel\u003e\n    \u003cTabPanel\u003ePanel 2\u003c/TabPanel\u003e\n  \u003c/Tabs\u003e\n);\n```\n\n## License\n\nMIT\n","funding_links":["https://github.com/sponsors/danez"],"categories":["Other Components","JavaScript","UI Components","Uncategorized","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e"],"sub_categories":["Tabs","Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactjs%2Freact-tabs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freactjs%2Freact-tabs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactjs%2Freact-tabs/lists"}