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)