0
# React Tabs
1

2
React Tabs is an accessible and easy-to-use tab component system for ReactJS applications. It provides a complete set of composable components (Tabs, TabList, Tab, TabPanel) that work together to create tabbed interfaces with full accessibility support including ARIA compliance and keyboard navigation.
3

4
## Package Information
5

6
- **Package Name**: react-tabs
7
- **Package Type**: npm
8
- **Language**: JavaScript with TypeScript definitions
9
- **Installation**: `npm install react-tabs` or `yarn add react-tabs`
10
- **React Compatibility**: Requires React ^18.0.0 || ^19.0.0
11

12
## Core Imports
13

14
```javascript
15
import { Tabs, TabList, Tab, TabPanel } from "react-tabs";
16
import "react-tabs/style/react-tabs.css";
17
```
18

19
For CommonJS:
20

21
```javascript
22
const { Tabs, TabList, Tab, TabPanel } = require("react-tabs");
23
```
24

25
## Basic Usage
26

27
```javascript
28
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
29
import 'react-tabs/style/react-tabs.css';
30

31
export default () => (
32
  <Tabs>
33
    <TabList>
34
      <Tab>Title 1</Tab>
35
      <Tab>Title 2</Tab>
36
    </TabList>
37

38
    <TabPanel>
39
      <h2>Any content 1</h2>
40
    </TabPanel>
41
    <TabPanel>
42
      <h2>Any content 2</h2>
43
    </TabPanel>
44
  </Tabs>
45
);
46
```
47

48
## Architecture
49

50
React Tabs is built around four core components that work together:
51

52
- **Tabs**: Main container component that manages state, handles keyboard navigation, and provides controlled/uncontrolled behavior
53
- **TabList**: Container for Tab components that renders as an accessible `<ul>` element with `role="tablist"`
54
- **Tab**: Individual tab elements that render as `<li>` elements with `role="tab"` and full ARIA attributes
55
- **TabPanel**: Content areas that render as `<div>` elements with `role="tabpanel"` and conditional visibility
56

57
The library supports both controlled and uncontrolled modes, allowing developers to either manage tab state internally or externally, with comprehensive validation to ensure proper component structure.
58

59
**Internal Architecture**: The main `Tabs` component acts as a state management layer that wraps the low-level `UncontrolledTabs` component. The `Tabs` component handles mode detection (controlled vs uncontrolled), state initialization, and event delegation, then passes processed props to `UncontrolledTabs` which handles the actual rendering, keyboard navigation, focus management, and DOM event handling. This separation allows for clean state management while maintaining complex accessibility features.
60

61
## Capabilities
62

63
### Core Components
64

65
Complete set of accessible React components for building tabbed interfaces with keyboard navigation and ARIA compliance.
66

67
```typescript { .api }
68
const Tabs: React.FunctionComponent<TabsProps>;
69
const TabList: React.FunctionComponent<TabListProps>;
70
const Tab: React.FunctionComponent<TabProps>;
71
const TabPanel: React.FunctionComponent<TabPanelProps>;
72
```
73

74
[Core Components](./components.md)
75

76
### State Management
77

78
Flexible state management supporting both controlled and uncontrolled modes with comprehensive event handling.
79

80
```typescript { .api }
81
interface TabsProps {
82
  selectedIndex?: number; // Controlled mode
83
  defaultIndex?: number; // Uncontrolled mode initial index
84
  onSelect?: (index: number, last: number, event: Event) => boolean | void;
85
}
86
```
87

88
[State Management](./state-management.md)
89

90
### Accessibility Features
91

92
Full accessibility support with ARIA compliance, keyboard navigation, and focus management.
93

94
```typescript { .api }
95
interface TabsProps {
96
  defaultFocus?: boolean; // Focus on initial render
97
  direction?: 'rtl' | 'ltr'; // Text direction support
98
  disableUpDownKeys?: boolean; // Keyboard navigation options
99
  disableLeftRightKeys?: boolean;
100
}
101
```
102

103
[Accessibility](./accessibility.md)
104

105
### Styling System
106

107
Flexible styling system supporting multiple className formats and default CSS classes.
108

109
```typescript { .api }
110
type ClassNameProp = string | string[] | { [name: string]: boolean };
111

112
interface TabsProps {
113
  className?: ClassNameProp;
114
  selectedTabClassName?: string;
115
  selectedTabPanelClassName?: string;
116
  disabledTabClassName?: string;
117
}
118
```
119

120
[Styling](./styling.md)
121

122
## Types
123

124
```typescript { .api }
125
interface TabsProps extends Omit<HTMLProps<HTMLDivElement>, 'className' | 'onSelect' | 'ref'> {
126
  className?: string | string[] | { [name: string]: boolean };
127
  defaultFocus?: boolean;
128
  defaultIndex?: number;
129
  direction?: 'rtl' | 'ltr';
130
  disabledTabClassName?: string;
131
  disableUpDownKeys?: boolean;
132
  disableLeftRightKeys?: boolean;
133
  domRef?: ((node?: HTMLElement) => void);
134
  environment?: Window;
135
  focusTabOnClick?: boolean;
136
  forceRenderTabPanel?: boolean;
137
  onSelect?: ((index: number, last: number, event: Event) => boolean | void);
138
  selectedIndex?: number;
139
  selectedTabClassName?: string;
140
  selectedTabPanelClassName?: string;
141
}
142

143
interface TabListProps extends Omit<HTMLProps<HTMLUListElement>, 'className'> {
144
  className?: string | string[] | { [name: string]: boolean };
145
}
146

147
interface TabProps extends Omit<HTMLProps<HTMLLIElement>, 'className' | 'tabIndex'> {
148
  className?: string | string[] | { [name: string]: boolean };
149
  disabled?: boolean;
150
  disabledClassName?: string;
151
  selectedClassName?: string;
152
  tabIndex?: string;
153
}
154

155
interface TabPanelProps extends Omit<HTMLProps<HTMLDivElement>, 'className'> {
156
  className?: string | string[] | { [name: string]: boolean };
157
  forceRender?: boolean;
158
  selectedClassName?: string;
159
}
160

161
interface ReactTabsFunctionComponent<P = {}> extends FunctionComponent<P> {
162
  tabsRole: 'Tabs' | 'TabList' | 'Tab' | 'TabPanel';
163
}
164
```
165

166
## Internal Interfaces
167

168
```typescript { .api }
169
interface ReactTabsFunctionComponent<P = {}> extends FunctionComponent<P> {
170
  /** Static property used for component validation and identification */
171
  tabsRole: 'Tabs' | 'TabList' | 'Tab' | 'TabPanel';
172
}
173
```