0
# RC Tabs
1

2
RC Tabs is a comprehensive React tabs UI component library that provides accessible, customizable, and feature-rich tabbed interfaces. It offers keyboard navigation, animations, editable tabs, multiple positioning options, and extensive styling capabilities, making it suitable for both simple tabbed content and complex interactive applications.
3

4
## Package Information
5

6
- **Package Name**: rc-tabs
7
- **Package Type**: npm  
8
- **Language**: TypeScript
9
- **Installation**: `npm install rc-tabs`
10

11
## Core Imports
12

13
```typescript
14
import Tabs from "rc-tabs";
15
import type { 
16
  TabsProps, 
17
  Tab, 
18
  TabPosition, 
19
  AnimatedConfig, 
20
  EditableConfig, 
21
  TabsLocale, 
22
  TabContextProps 
23
} from "rc-tabs";
24
```
25

26
For accessing utility functions:
27

28
```typescript
29
import Tabs, { stringify, genDataNodeKey, getRemovable } from "rc-tabs";
30
```
31

32
For CommonJS:
33

34
```javascript
35
const Tabs = require("rc-tabs");
36
const { stringify, genDataNodeKey, getRemovable } = require("rc-tabs");
37
```
38

39
## Basic Usage
40

41
```typescript
42
import Tabs from "rc-tabs";
43

44
const items = [
45
  {
46
    key: '1',
47
    label: 'Tab 1',
48
    children: <div>Content of Tab 1</div>,
49
  },
50
  {
51
    key: '2', 
52
    label: 'Tab 2',
53
    children: <div>Content of Tab 2</div>,
54
  },
55
  {
56
    key: '3',
57
    label: 'Tab 3',
58
    children: <div>Content of Tab 3</div>,
59
    disabled: true,
60
  },
61
];
62

63
function App() {
64
  return (
65
    <Tabs
66
      defaultActiveKey="1"
67
      items={items}
68
      onChange={(key) => console.log('Active tab:', key)}
69
    />
70
  );
71
}
72
```
73

74
## Architecture
75

76
RC Tabs is built around several key components:
77

78
- **Main Tabs Component**: The primary `<Tabs>` component that orchestrates the entire tabbed interface
79
- **Tab Navigation**: Handles tab rendering, overflow management, and keyboard navigation
80
- **Tab Panels**: Manages content rendering with support for lazy loading and destruction
81
- **Animation System**: Integrated with rc-motion for smooth transitions and ink bar effects
82
- **Accessibility Layer**: Full ARIA support with proper roles, labels, and keyboard interaction
83
- **Responsive Design**: Automatic mobile detection and touch gesture support
84

85
## Capabilities
86

87
### Core Tab Interface
88

89
Main tabs component providing comprehensive tabbed interface functionality with full accessibility support.
90

91
```typescript { .api }
92
interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'> {
93
  prefixCls?: string;
94
  className?: string;
95
  style?: React.CSSProperties;
96
  id?: string;
97
  items?: Tab[];
98
  activeKey?: string;
99
  defaultActiveKey?: string;
100
  direction?: 'ltr' | 'rtl';
101
  animated?: boolean | AnimatedConfig;
102
  renderTabBar?: RenderTabBar;
103
  tabBarExtraContent?: TabBarExtraContent;
104
  tabBarGutter?: number;
105
  tabBarStyle?: React.CSSProperties;
106
  tabPosition?: TabPosition;
107
  destroyInactiveTabPane?: boolean;
108
  onChange?: (activeKey: string) => void;
109
  onTabClick?: (activeKey: string, e: React.KeyboardEvent | React.MouseEvent) => void;
110
  onTabScroll?: OnTabScroll;
111
  editable?: EditableConfig;
112
  getPopupContainer?: (node: HTMLElement) => HTMLElement;
113
  locale?: TabsLocale;
114
  more?: MoreProps;
115
  popupClassName?: string;
116
  indicator?: {
117
    size?: GetIndicatorSize;
118
    align?: 'start' | 'center' | 'end';
119
  };
120
}
121
```
122

123
[Core Tab Interface](./core-interface.md)
124

125
### Tab Configuration
126

127
Individual tab item configuration with support for content, styling, and interactive features.
128

129
```typescript { .api }
130
interface Tab {
131
  key: string;
132
  label: React.ReactNode;
133
  className?: string;
134
  style?: React.CSSProperties;
135
  disabled?: boolean;
136
  children?: React.ReactNode;
137
  forceRender?: boolean;
138
  closable?: boolean;
139
  closeIcon?: React.ReactNode;
140
  icon?: React.ReactNode;
141
}
142
```
143

144
[Tab Configuration](./tab-configuration.md)
145

146
### Animation and Transitions
147

148
Animation system with configurable ink bar and tab pane transitions for smooth user experiences.
149

150
```typescript { .api }
151
interface AnimatedConfig {
152
  inkBar?: boolean;
153
  tabPane?: boolean;
154
  tabPaneMotion?: CSSMotionProps;
155
}
156
```
157

158
[Animation and Transitions](./animation-transitions.md)
159

160
### Editable Tabs
161

162
Interactive tab management with add/remove functionality and customizable controls.
163

164
```typescript { .api }
165
interface EditableConfig {
166
  onEdit: (
167
    type: 'add' | 'remove',
168
    info: { key?: string; event: React.MouseEvent | React.KeyboardEvent }
169
  ) => void;
170
  showAdd?: boolean;
171
  removeIcon?: React.ReactNode;
172
  addIcon?: React.ReactNode;
173
}
174
```
175

176
[Editable Tabs](./editable-tabs.md)
177

178
### Advanced Features
179

180
Extended functionality including extra content, dropdown overflow, custom rendering, and responsive behavior.
181

182
```typescript { .api }
183
type TabPosition = 'left' | 'right' | 'top' | 'bottom';
184
type TabBarExtraContent = React.ReactNode | TabBarExtraMap;
185
type OnTabScroll = (info: { direction: 'left' | 'right' | 'top' | 'bottom' }) => void;
186
```
187

188
[Advanced Features](./advanced-features.md)
189

190
### Utility Functions
191

192
Helper functions exported for advanced use cases and internal operations.
193

194
```typescript { .api }
195
/**
196
 * Converts Map or Record to JSON string for dependency comparison
197
 * Used internally for optimizing re-renders with Map dependencies
198
 */
199
function stringify<K extends PropertyKey, V>(obj: Record<K, V> | Map<K, V>): string;
200

201
/**
202
 * Generates a safe data node key by escaping double quotes
203
 * Used internally for DOM element key generation
204
 */
205
function genDataNodeKey(key: React.Key): string;
206

207
/**
208
 * Determines if a tab can be removed based on various conditions
209
 * Used internally for editable tab validation
210
 */
211
function getRemovable(
212
  closable?: boolean,
213
  closeIcon?: React.ReactNode,
214
  editable?: EditableConfig,
215
  disabled?: boolean
216
): boolean;
217
```
218

219
## Types
220

221
### Core Types
222

223
```typescript { .api }
224
type TabPosition = 'left' | 'right' | 'top' | 'bottom';
225

226
interface TabsLocale {
227
  dropdownAriaLabel?: string;
228
  removeAriaLabel?: string;
229
  addAriaLabel?: string;
230
}
231

232
type TabBarExtraMap = Partial<Record<'left' | 'right', React.ReactNode>>;
233
type TabBarExtraContent = React.ReactNode | TabBarExtraMap;
234

235
type GetIndicatorSize = number | ((origin: number) => number);
236

237
interface MoreProps {
238
  icon?: React.ReactNode;
239
  trigger?: 'hover' | 'click';
240
}
241

242
type RenderTabBar = (
243
  props: RenderTabBarProps,
244
  DefaultTabBar: React.ComponentType
245
) => React.ReactElement;
246

247
interface RenderTabBarProps {
248
  id: string;
249
  activeKey: string;
250
  animated: AnimatedConfig;
251
  tabPosition: TabPosition;
252
  rtl: boolean;
253
  mobile: boolean;
254
  editable: EditableConfig;
255
  locale: TabsLocale;
256
  more: MoreProps;
257
  tabBarGutter: number;
258
  onTabClick: (key: string, e: React.MouseEvent | React.KeyboardEvent) => void;
259
  onTabScroll: OnTabScroll;
260
  extra: TabBarExtraContent;
261
  style: React.CSSProperties;
262
  panes: React.ReactNode;
263
}
264

265
interface CSSMotionProps {
266
  motionName?: string;
267
  motionAppear?: boolean;
268
  motionEnter?: boolean;
269
  motionLeave?: boolean;
270
  motionAppearDuration?: number;
271
  motionEnterDuration?: number;
272
  motionLeaveDuration?: number;
273
  onAppearStart?: (node: HTMLElement, done: () => void) => CSSMotionEvent;
274
  onEnterStart?: (node: HTMLElement, done: () => void) => CSSMotionEvent;
275
  onLeaveStart?: (node: HTMLElement, done: () => void) => CSSMotionEvent;
276
  onAppearActive?: (node: HTMLElement, done: () => void) => CSSMotionEvent;
277
  onEnterActive?: (node: HTMLElement, done: () => void) => CSSMotionEvent;
278
  onLeaveActive?: (node: HTMLElement, done: () => void) => CSSMotionEvent;
279
  onAppearEnd?: (node: HTMLElement, done: () => void) => boolean | void;
280
  onEnterEnd?: (node: HTMLElement, done: () => void) => boolean | void;
281
  onLeaveEnd?: (node: HTMLElement, done: () => void) => boolean | void;
282
}
283

284
interface CSSMotionEvent {
285
  deadline?: boolean;
286
  target?: HTMLElement;
287
}
288

289
interface TabContextProps {
290
  tabs: Tab[];
291
  prefixCls: string;
292
}
293

294
type SizeInfo = [width: number, height: number];
295

296
type TabSizeMap = Map<React.Key, { width: number; height: number; left: number; top: number }>;
297

298
interface TabOffset {
299
  width: number;
300
  height: number;
301
  left: number;
302
  right: number;
303
  top: number;
304
}
305

306
type TabOffsetMap = Map<React.Key, TabOffset>;
307
```