React Tabs Component

Common errors

• Warning: Each child in a list should have a unique "key" prop.

  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.
  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.

• 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.

  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.
  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.

Warnings

• breaking 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.
  Fix: Replace `destroyInactiveTabPane` with `destroyOnHidden` in your `Tabs` component props. For example: `<Tabs destroyOnHidden={true} />`.
• gotcha 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.
  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.
• gotcha 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.
  Fix: Prefer using the `tabPosition` prop to control the placement of the tab navigation bar.

Install

• npm install rc-tabs npm
• yarn add rc-tabs yarn
• pnpm add rc-tabs pnpm

Imports

• Tabs
  wrong:

  import { Tabs } from 'rc-tabs';
  const Tabs = require('rc-tabs');

  correct:

  import Tabs from 'rc-tabs';

  The main Tabs component is a default export.
• TabItem

  import type { TabItem } from 'rc-tabs';

  Type definition for the items array elements, useful for TypeScript projects.
• TabsProps

  import type { TabsProps } from 'rc-tabs';

  Type definition for the props accepted by the Tabs component, for stronger type checking.

Quickstart

Demonstrates a basic `rc-tabs` setup with static content, keyboard navigation, custom styling, and an `onChange` callback, rendered using React 18's createRoot.

import Tabs from 'rc-tabs';
import React from 'react';
import ReactDOM from 'react-dom/client';

const callback = (key: string) => {
  console.log(`Active tab: ${key}`);
};

const items = [
  {
    key: '1',
    label: 'Google',
    children: (
      <div className="text-xl">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      </div>
    ),
  },
  {
    key: '2',
    label: <p>Amazon</p>,
    children:
      'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...', 
    disabled: true,
  },
  {
    key: '3',
    label: <p>Twitter</p>,
    children: (
      <div>
        "There is no one who loves pain itself, who seeks after it and wants to have it, simply
        because it is pain..."
      </div>
    ),
  },
];

// Ensure a root element with id="root" exists in your public/index.html
const rootElement = document.getElementById('root');

if (rootElement) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <React.StrictMode>
      <Tabs
        tabPosition="bottom"
        items={items}
        defaultActiveKey="1"
        className="md:w-[70%] w-full mx-auto p-2 border-0"
        onChange={callback}
        style={{ color: 'yellow', border: '1px solid #eee', padding: 10 }}
      />
    </React.StrictMode>
  );
} else {
  console.error('Root element with id "root" not found in the document.');
}