0
# Core Collapse Component
1
2
The Collapse component is the main container that manages the state and rendering of collapsible panels. It supports both accordion mode (single panel open) and collapse mode (multiple panels open).
3
4
## Component API
5
6
```typescript { .api }
7
declare const Collapse: React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<HTMLDivElement>>;
8
9
interface CollapseProps {
10
prefixCls?: string;
11
activeKey?: React.Key | React.Key[];
12
defaultActiveKey?: React.Key | React.Key[];
13
openMotion?: CSSMotionProps;
14
onChange?: (key: React.Key[]) => void;
15
accordion?: boolean;
16
className?: string;
17
style?: object;
18
destroyInactivePanel?: boolean;
19
expandIcon?: (props: CollapsePanelProps) => React.ReactNode;
20
collapsible?: CollapsibleType;
21
children?: React.ReactNode;
22
items?: ItemType[];
23
}
24
25
type CollapsibleType = 'header' | 'icon' | 'disabled';
26
```
27
28
## Props Documentation
29
30
### State Management Props
31
32
- **`activeKey`**: `React.Key | React.Key[]` - Currently active panel keys for controlled usage
33
- **`defaultActiveKey`**: `React.Key | React.Key[]` - Default active panel keys for uncontrolled usage
34
- **`onChange`**: `(key: React.Key[]) => void` - Callback fired when panel active state changes
35
36
### Mode Configuration
37
38
- **`accordion`**: `boolean` - When true, only one panel can be open at a time (default: false)
39
40
### Content Configuration
41
42
- **`items`**: `ItemType[]` - Panel configuration array (recommended approach)
43
- **`children`**: `React.ReactNode` - Legacy Panel components (deprecated)
44
45
### Behavior Props
46
47
- **`destroyInactivePanel`**: `boolean` - Destroy inactive panel content for performance (default: false)
48
- **`collapsible`**: `CollapsibleType` - Global collapsible behavior for all panels
49
- `'header'`: Click header to toggle
50
- `'icon'`: Click expand icon to toggle
51
- `'disabled'`: Panels cannot be toggled
52
53
### Styling Props
54
55
- **`prefixCls`**: `string` - CSS class prefix (default: 'rc-collapse')
56
- **`className`**: `string` - Custom CSS class for the container
57
- **`style`**: `object` - Inline styles for the container
58
59
### Animation Props
60
61
- **`openMotion`**: `CSSMotionProps` - rc-motion configuration for expand/collapse animations
62
- **`expandIcon`**: `(props: CollapsePanelProps) => React.ReactNode` - Custom expand icon renderer
63
64
## Usage Examples
65
66
### Basic Collapse
67
68
```typescript
69
import Collapse from "rc-collapse";
70
71
const BasicExample = () => {
72
const items = [
73
{ key: '1', label: 'Section 1', children: 'Content 1' },
74
{ key: '2', label: 'Section 2', children: 'Content 2' },
75
{ key: '3', label: 'Section 3', children: 'Content 3' },
76
];
77
78
return <Collapse items={items} />;
79
};
80
```
81
82
### Controlled Accordion
83
84
```typescript
85
import React, { useState } from 'react';
86
import Collapse from "rc-collapse";
87
88
const ControlledAccordion = () => {
89
const [activeKey, setActiveKey] = useState<string>('1');
90
91
const items = [
92
{ key: '1', label: 'Panel 1', children: 'Content 1' },
93
{ key: '2', label: 'Panel 2', children: 'Content 2' },
94
];
95
96
return (
97
<Collapse
98
accordion
99
activeKey={activeKey}
100
onChange={(keys) => setActiveKey(keys[0] || '')}
101
items={items}
102
/>
103
);
104
};
105
```
106
107
### Custom Expand Icon
108
109
```typescript
110
import Collapse from "rc-collapse";
111
112
const CustomIconExample = () => {
113
const expandIcon = ({ isActive }) => (
114
<span style={{ transform: `rotate(${isActive ? 90 : 0}deg)` }}>
115
▶
116
</span>
117
);
118
119
const items = [
120
{ key: '1', label: 'Custom Icon Panel', children: 'Content' },
121
];
122
123
return (
124
<Collapse
125
expandIcon={expandIcon}
126
items={items}
127
/>
128
);
129
};
130
```
131
132
### Performance Optimization
133
134
```typescript
135
import Collapse from "rc-collapse";
136
137
const PerformanceExample = () => {
138
const items = [
139
{
140
key: '1',
141
label: 'Heavy Content Panel',
142
children: <ExpensiveComponent />,
143
destroyInactivePanel: true, // Override global setting
144
},
145
{
146
key: '2',
147
label: 'Always Rendered Panel',
148
children: <LightComponent />,
149
forceRender: true,
150
},
151
];
152
153
return (
154
<Collapse
155
destroyInactivePanel={true}
156
items={items}
157
/>
158
);
159
};
160
```
161
162
## Accessibility
163
164
The Collapse component includes built-in accessibility features:
165
166
- **ARIA Roles**: Uses `tablist`/`tab` for accordion mode, `button` for collapse mode
167
- **Keyboard Navigation**: Enter key toggles panel state
168
- **Screen Reader Support**: Proper `aria-expanded` and `aria-disabled` attributes
169
- **Focus Management**: Keyboard navigation between panels with proper tabIndex handling
170
171
## State Behavior
172
173
### Accordion Mode (`accordion={true}`)
174
- Only one panel can be active at a time
175
- Opening a panel automatically closes the previously active panel
176
- `activeKey` should be a single key (arrays use first element)
177
178
### Collapse Mode (`accordion={false}`)
179
- Multiple panels can be active simultaneously
180
- `activeKey` can be an array of keys
181
- Independent panel state management