rc-tabs

library15.7.0jsnpmunverified

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.

web-framework

npm install rc-tabs

github ↗package ↗

INSTALL

IMPORT

SIG · RC-TABS

rc-tabs

web-frameworkjavascriptv15.7.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Tabs

✓ import Tabs from 'rc-tabs';

✗ import { Tabs } from 'rc-tabs'; const Tabs = require('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.

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.'); }

Debug

Known issues

breakingThe `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} />`.

affects: >=15.5.0

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

affects: All

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

affects: All

Errors

Common errors & fixes

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

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.

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.

Upgrade

Version history

15.7.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React applications.

react-domrequiredPeer dependency for rendering React components to the DOM.

Agent activity

5 hits · last 30 days

node

Resources

githubhttps://github.com/react-component/tabs ↗

packagehttps://www.npmjs.com/package/rc-tabs ↗