{"id":15779,"library":"rc-tabs","title":"React Tabs Component","description":"rc-tabs is a foundational React UI component designed to provide a highly flexible and accessible tab interface. It is part of the `react-component` ecosystem, focusing on delivering core functionality without imposing specific styling, allowing developers to integrate it seamlessly into various design systems. The current stable version is 15.7.0, with regular updates that typically occur weekly or bi-weekly, addressing bug fixes, accessibility enhancements, and minor feature additions. Its key differentiators include built-in keyboard navigation for improved accessibility, extensive customization options via `prefixCls`, `className`, `style`, and `renderTabBar` props, and a commitment to being a lightweight, unstyled component. This makes `rc-tabs` an ideal choice for projects requiring a robust tab solution that prioritizes control over visual presentation.","status":"active","version":"15.7.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/react-component/tabs","tags":["javascript","react","react-component","react-tabs","typescript"],"install":[{"cmd":"npm install rc-tabs","lang":"bash","label":"npm"},{"cmd":"yarn add rc-tabs","lang":"bash","label":"yarn"},{"cmd":"pnpm add rc-tabs","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React applications.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"The main Tabs component is a default export.","wrong":"import { Tabs } from 'rc-tabs';\nconst Tabs = require('rc-tabs');","symbol":"Tabs","correct":"import Tabs from 'rc-tabs';"},{"note":"Type definition for the items array elements, useful for TypeScript projects.","symbol":"TabItem","correct":"import type { TabItem } from 'rc-tabs';"},{"note":"Type definition for the props accepted by the Tabs component, for stronger type checking.","symbol":"TabsProps","correct":"import type { TabsProps } from 'rc-tabs';"}],"quickstart":{"code":"import Tabs from 'rc-tabs';\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\n\nconst callback = (key: string) => {\n  console.log(`Active tab: ${key}`);\n};\n\nconst items = [\n  {\n    key: '1',\n    label: 'Google',\n    children: (\n      <div className=\"text-xl\">\n        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>\n      </div>\n    ),\n  },\n  {\n    key: '2',\n    label: <p>Amazon</p>,\n    children:\n      'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...', \n    disabled: true,\n  },\n  {\n    key: '3',\n    label: <p>Twitter</p>,\n    children: (\n      <div>\n        \"There is no one who loves pain itself, who seeks after it and wants to have it, simply\n        because it is pain...\"\n      </div>\n    ),\n  },\n];\n\n// Ensure a root element with id=\"root\" exists in your public/index.html\nconst rootElement = document.getElementById('root');\n\nif (rootElement) {\n  const root = ReactDOM.createRoot(rootElement);\n  root.render(\n    <React.StrictMode>\n      <Tabs\n        tabPosition=\"bottom\"\n        items={items}\n        defaultActiveKey=\"1\"\n        className=\"md:w-[70%] w-full mx-auto p-2 border-0\"\n        onChange={callback}\n        style={{ color: 'yellow', border: '1px solid #eee', padding: 10 }}\n      />\n    </React.StrictMode>\n  );\n} else {\n  console.error('Root element with id \"root\" not found in the document.');\n}","lang":"typescript","description":"Demonstrates a basic `rc-tabs` setup with static content, keyboard navigation, custom styling, and an `onChange` callback, rendered using React 18's createRoot."},"warnings":[{"fix":"Replace `destroyInactiveTabPane` with `destroyOnHidden` in your `Tabs` component props. For example: `<Tabs destroyOnHidden={true} />`.","message":"The `destroyInactiveTabPane` prop has been renamed to `destroyOnHidden` for clarity and consistency. Using the old prop name will no longer have an effect and should be updated.","severity":"breaking","affected_versions":">=15.5.0"},{"fix":"For controlled tabs, always use `activeKey` in conjunction with the `onChange` prop to update the state controlling `activeKey`. For uncontrolled tabs, use `defaultActiveKey` only for initial render.","message":"When managing active tabs, distinguish between `defaultActiveKey` for uncontrolled components (initial state only) and `activeKey` for controlled components (state managed by a parent). Misusing `activeKey` without an `onChange` handler to update its value will prevent tab changes.","severity":"gotcha","affected_versions":"All"},{"fix":"Prefer using the `tabPosition` prop to control the placement of the tab navigation bar.","message":"The API documentation lists both `tabPosition` and `tabBarPosition` props with seemingly identical functionalities (`'left' | 'right' | 'top' | 'bottom'`). While both might work, `tabPosition` is more commonly used in examples and is the recommended approach for clarity.","severity":"gotcha","affected_versions":"All"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure every object in the `items` array has a unique `key` string property. If using a custom `renderTabBar`, explicitly assign unique `key` props to each tab element you render.","cause":"Elements within the `items` array, or custom rendered tabs, are missing a unique `key` prop, which React requires for efficient list reconciliation and preventing unexpected behavior.","error":"Warning: Each child in a list should have a unique \"key\" prop."},{"fix":"If `activeKey` is used, ensure the `onChange` handler updates the state that `activeKey` depends on. Verify no other component within the Tabs tree is causing uncontrolled re-renders by calling `setState` directly or indirectly in a render cycle.","cause":"This error typically occurs when the `activeKey` prop is used without properly updating its value in the `onChange` handler, causing an uncontrolled re-render loop, or due to other state management issues within the Tabs children.","error":"Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops."}],"ecosystem":"npm"}