0
# RC-Collapse
1
2
RC-Collapse is a React component library that provides collapsible panel functionality with support for both accordion and collapse modes. It offers extensive customization options including animations, keyboard navigation, and semantic styling capabilities.
3
4
## Package Information
5
6
- **Package Name**: rc-collapse
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install rc-collapse`
10
11
## Core Imports
12
13
```typescript
14
import Collapse from "rc-collapse";
15
import type { CollapseProps, CollapsePanelProps } from "rc-collapse";
16
import "rc-collapse/assets/index.css";
17
```
18
19
For legacy Panel component (deprecated):
20
21
```typescript
22
import Collapse, { Panel } from "rc-collapse";
23
import "rc-collapse/assets/index.css";
24
```
25
26
For CommonJS:
27
28
```javascript
29
const Collapse = require("rc-collapse");
30
const { Panel } = Collapse;
31
require("rc-collapse/assets/index.css");
32
```
33
34
## Basic Usage
35
36
```typescript
37
import Collapse from "rc-collapse";
38
import type { CollapseProps } from "rc-collapse";
39
import "rc-collapse/assets/index.css";
40
41
// Using the modern items API (recommended)
42
const App = () => {
43
const items: CollapseProps['items'] = [
44
{
45
key: '1',
46
label: 'Panel Header 1',
47
children: <p>Panel content 1</p>,
48
},
49
{
50
key: '2',
51
label: 'Panel Header 2',
52
children: <p>Panel content 2</p>,
53
},
54
];
55
56
return <Collapse items={items} />;
57
};
58
59
// Controlled accordion mode
60
const AccordionApp = () => {
61
const [activeKey, setActiveKey] = React.useState<string>('1');
62
63
return (
64
<Collapse
65
accordion
66
activeKey={activeKey}
67
onChange={(keys) => setActiveKey(keys[0])}
68
items={items}
69
/>
70
);
71
};
72
```
73
74
## Architecture
75
76
RC-Collapse is built around several key components:
77
78
- **Collapse Component**: Main container that manages panel state and renders child panels
79
- **Panel System**: Individual collapsible panels with headers, content, and animations
80
- **State Management**: Controlled/uncontrolled patterns with active key tracking
81
- **Animation Integration**: Smooth expand/collapse animations via rc-motion
82
- **Accessibility Layer**: ARIA roles, keyboard navigation, and screen reader support
83
84
## Capabilities
85
86
### Core Collapse Component
87
88
Main collapsible container component supporting both accordion and multi-panel collapse modes with extensive customization options.
89
90
```typescript { .api }
91
declare const Collapse: React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<HTMLDivElement>>;
92
93
interface CollapseProps {
94
prefixCls?: string;
95
activeKey?: React.Key | React.Key[];
96
defaultActiveKey?: React.Key | React.Key[];
97
openMotion?: CSSMotionProps;
98
onChange?: (key: React.Key[]) => void;
99
accordion?: boolean;
100
className?: string;
101
style?: object;
102
destroyInactivePanel?: boolean;
103
expandIcon?: (props: CollapsePanelProps) => React.ReactNode;
104
collapsible?: CollapsibleType;
105
children?: React.ReactNode;
106
items?: ItemType[];
107
}
108
109
type CollapsibleType = 'header' | 'icon' | 'disabled';
110
```
111
112
[Core Component Details](./core-component.md)
113
114
### Panel Configuration
115
116
Panel item configuration system for defining individual collapsible sections with custom headers, content, and behavior.
117
118
```typescript { .api }
119
interface ItemType {
120
key?: React.Key;
121
label?: React.ReactNode;
122
children?: React.ReactNode;
123
collapsible?: CollapsibleType;
124
onItemClick?: (panelKey: React.Key) => void;
125
destroyInactivePanel?: boolean;
126
className?: string;
127
style?: object;
128
classNames?: Partial<Record<SemanticName, string>>;
129
styles?: Partial<Record<SemanticName, React.CSSProperties>>;
130
extra?: React.ReactNode;
131
forceRender?: boolean;
132
showArrow?: boolean;
133
headerClass?: string;
134
ref?: React.RefObject<HTMLDivElement>;
135
}
136
137
type SemanticName = 'header' | 'title' | 'body' | 'icon';
138
```
139
140
[Panel Configuration](./panel-configuration.md)
141
142
### Animation and Motion
143
144
Animation system integration with rc-motion for smooth expand/collapse transitions and custom motion configurations.
145
146
```typescript { .api }
147
interface CSSMotionProps {
148
motionName?: string;
149
motionAppear?: boolean;
150
motionEnter?: boolean;
151
motionLeave?: boolean;
152
motionLeaveImmediately?: boolean;
153
motionDeadline?: number;
154
removeOnLeave?: boolean;
155
leavedClassName?: string;
156
onAppearStart?: MotionEventHandler;
157
onEnterStart?: MotionEventHandler;
158
onLeaveStart?: MotionEventHandler;
159
onAppearActive?: MotionEventHandler;
160
onEnterActive?: MotionEventHandler;
161
onLeaveActive?: MotionEventHandler;
162
onAppearEnd?: MotionEventHandler;
163
onEnterEnd?: MotionEventHandler;
164
onLeaveEnd?: MotionEventHandler;
165
}
166
```
167
168
[Animation Configuration](./animation.md)
169
170
### Legacy Panel Component
171
172
Deprecated Panel component for backward compatibility. Use the `items` prop instead for new implementations.
173
174
```typescript { .api }
175
declare const Panel: React.ForwardRefExoticComponent<CollapsePanelProps & React.RefAttributes<HTMLDivElement>>;
176
177
interface CollapsePanelProps extends React.DOMAttributes<HTMLDivElement> {
178
id?: string;
179
header?: string | React.ReactNode;
180
prefixCls?: string;
181
headerClass?: string;
182
showArrow?: boolean;
183
className?: string;
184
classNames?: Partial<Record<SemanticName, string>>;
185
style?: object;
186
styles?: Partial<Record<SemanticName, React.CSSProperties>>;
187
isActive?: boolean;
188
openMotion?: CSSMotionProps;
189
destroyInactivePanel?: boolean;
190
accordion?: boolean;
191
forceRender?: boolean;
192
extra?: string | React.ReactNode;
193
onItemClick?: (panelKey: React.Key) => void;
194
expandIcon?: (props: CollapsePanelProps) => React.ReactNode;
195
panelKey?: React.Key;
196
role?: string;
197
collapsible?: CollapsibleType;
198
children?: React.ReactNode;
199
}
200
```
201
202
[Legacy Panel Component](./legacy-panel.md)