0
# Panel Configuration
1

2
Panel configuration defines the structure and behavior of individual collapsible sections within a Collapse component. The modern approach uses the `items` prop with `ItemType` objects.
3

4
## ItemType Interface
5

6
```typescript { .api }
7
interface ItemType {
8
  key?: React.Key;
9
  label?: React.ReactNode;
10
  children?: React.ReactNode;
11
  collapsible?: CollapsibleType;
12
  onItemClick?: (panelKey: React.Key) => void;
13
  destroyInactivePanel?: boolean;
14
  className?: string;
15
  style?: object;
16
  classNames?: Partial<Record<SemanticName, string>>;
17
  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
18
  extra?: React.ReactNode;
19
  forceRender?: boolean;
20
  showArrow?: boolean;
21
  headerClass?: string;
22
  ref?: React.RefObject<HTMLDivElement>;
23
}
24

25
type CollapsibleType = 'header' | 'icon' | 'disabled';
26
type SemanticName = 'header' | 'title' | 'body' | 'icon';
27
```
28

29
## Configuration Properties
30

31
### Essential Properties
32

33
- **`key`**: `React.Key` - Unique identifier for the panel (defaults to array index)
34
- **`label`**: `React.ReactNode` - Panel header content (text, JSX, or React components)
35
- **`children`**: `React.ReactNode` - Panel body content
36

37
### Behavior Configuration
38

39
- **`collapsible`**: `CollapsibleType` - Override global collapsible behavior for this panel
40
  - `'header'`: Click header area to toggle
41
  - `'icon'`: Click expand icon only to toggle
42
  - `'disabled'`: Panel cannot be toggled
43
- **`onItemClick`**: `(panelKey: React.Key) => void` - Panel-specific click handler
44
- **`destroyInactivePanel`**: `boolean` - Override global destroy behavior for this panel
45
- **`forceRender`**: `boolean` - Always render panel content even when inactive
46
- **`showArrow`**: `boolean` - Show/hide expand arrow for this panel (default: true)
47
- **`ref`**: `React.RefObject<HTMLDivElement>` - React ref for the panel element
48

49
### Styling Configuration
50

51
- **`className`**: `string` - Custom CSS class for the panel container
52
- **`style`**: `object` - Inline styles for the panel container
53
- **`headerClass`**: `string` - Custom CSS class for the panel header
54
- **`classNames`**: `Partial<Record<SemanticName, string>>` - Semantic CSS classes
55
- **`styles`**: `Partial<Record<SemanticName, React.CSSProperties>>` - Semantic inline styles
56
- **`extra`**: `React.ReactNode` - Additional content rendered in the header area
57

58
## Usage Examples
59

60
### Basic Panel Configuration
61

62
```typescript
63
import Collapse from "rc-collapse";
64

65
const BasicPanels = () => {
66
  const items = [
67
    {
68
      key: 'panel1',
69
      label: 'First Panel',
70
      children: <div>This is the content of the first panel</div>,
71
    },
72
    {
73
      key: 'panel2',
74
      label: 'Second Panel',
75
      children: 'Simple text content for second panel',
76
    },
77
  ];
78

79
  return <Collapse items={items} />;
80
};
81
```
82

83
### Advanced Panel Configuration
84

85
```typescript
86
import Collapse from "rc-collapse";
87

88
const AdvancedPanels = () => {
89
  const items = [
90
    {
91
      key: 'interactive',
92
      label: (
93
        <div onKeyDown={(e) => e.stopPropagation()}>
94
          <input placeholder="This input won't trigger panel toggle" />
95
        </div>
96
      ),
97
      children: 'Panel with interactive header',
98
      showArrow: true,
99
    },
100
    {
101
      key: 'disabled',
102
      label: 'Disabled Panel',
103
      children: 'This panel cannot be toggled',
104
      collapsible: 'disabled',
105
    },
106
    {
107
      key: 'icon-only',
108
      label: 'Icon Only Toggle',
109
      children: 'Click the arrow icon to toggle this panel',
110
      collapsible: 'icon',
111
    },
112
  ];
113

114
  return <Collapse items={items} />;
115
};
116
```
117

118
### Panel with Extra Content
119

120
```typescript
121
import Collapse from "rc-collapse";
122

123
const PanelWithExtra = () => {
124
  const items = [
125
    {
126
      key: 'with-extra',
127
      label: 'Panel with Extra Content',
128
      children: 'Main panel content here',
129
      extra: (
130
        <button onClick={(e) => {
131
          e.stopPropagation();
132
          console.log('Extra button clicked');
133
        }}>
134
          Action
135
        </button>
136
      ),
137
    },
138
  ];
139

140
  return <Collapse items={items} />;
141
};
142
```
143

144
### Semantic Styling
145

146
```typescript
147
import Collapse from "rc-collapse";
148

149
const SemanticStyling = () => {
150
  const items = [
151
    {
152
      key: 'styled',
153
      label: 'Styled Panel',
154
      children: 'Content with custom styling',
155
      classNames: {
156
        header: 'custom-header-class',
157
        title: 'custom-title-class',
158
        body: 'custom-body-class',
159
        icon: 'custom-icon-class',
160
      },
161
      styles: {
162
        header: { backgroundColor: '#f0f0f0', padding: '12px' },
163
        title: { fontWeight: 'bold', color: '#333' },
164
        body: { padding: '16px', border: '1px solid #ddd' },
165
        icon: { color: '#1890ff' },
166
      },
167
    },
168
  ];
169

170
  return <Collapse items={items} />;
171
};
172
```
173

174
### Performance-Optimized Panels
175

176
```typescript
177
import Collapse from "rc-collapse";
178

179
const PerformancePanels = () => {
180
  const items = [
181
    {
182
      key: 'heavy-content',
183
      label: 'Heavy Content Panel',
184
      children: <ExpensiveComponent />,
185
      destroyInactivePanel: true, // Destroy when inactive
186
    },
187
    {
188
      key: 'always-rendered',
189
      label: 'Always Rendered Panel',
190
      children: <ImportantComponent />,
191
      forceRender: true, // Always keep in DOM
192
    },
193
    {
194
      key: 'lazy-content',
195
      label: 'Lazy Content Panel',
196
      children: <LazyComponent />,
197
      // Default behavior: render when first opened
198
    },
199
  ];
200

201
  return <Collapse items={items} />;
202
};
203
```
204

205
### Custom Click Handlers
206

207
```typescript
208
import Collapse from "rc-collapse";
209

210
const CustomClickHandlers = () => {
211
  const handlePanelClick = (panelKey: React.Key) => {
212
    console.log(`Panel ${panelKey} was clicked`);
213
    // Custom logic here
214
  };
215

216
  const items = [
217
    {
218
      key: 'tracked',
219
      label: 'Tracked Panel',
220
      children: 'This panel logs clicks',
221
      onItemClick: handlePanelClick,
222
    },
223
    {
224
      key: 'analytics',
225
      label: 'Analytics Panel',
226
      children: 'This panel sends analytics events',
227
      onItemClick: (key) => {
228
        // Send analytics event
229
        analytics.track('panel_toggled', { panelKey: key });
230
      },
231
    },
232
  ];
233

234
  return <Collapse items={items} />;
235
};
236
```
237

238
## Panel Key Management
239

240
### Key Generation
241
- If `key` is not provided, the panel's array index is used as the key
242
- Keys are converted to strings internally for consistency
243
- Use meaningful, stable keys for better performance and state management
244

245
### Key Best Practices
246
```typescript
247
// Good: Meaningful, stable keys
248
const goodItems = [
249
  { key: 'user-profile', label: 'Profile', children: '...' },
250
  { key: 'user-settings', label: 'Settings', children: '...' },
251
];
252

253
// Avoid: Index-based keys when order might change
254
const avoidItems = [
255
  { key: 0, label: 'Dynamic Item', children: '...' },
256
  { key: 1, label: 'Another Item', children: '...' },
257
];
258
```
259

260
## Migration from Legacy Panel Components
261

262
```typescript
263
// Legacy approach (deprecated)
264
<Collapse>
265
  <Panel header="Panel 1" key="1">Content 1</Panel>
266
  <Panel header="Panel 2" key="2">Content 2</Panel>
267
</Collapse>
268

269
// Modern approach (recommended)
270
<Collapse
271
  items={[
272
    { key: '1', label: 'Panel 1', children: 'Content 1' },
273
    { key: '2', label: 'Panel 2', children: 'Content 2' },
274
  ]}
275
/>
276
```