0
# RC Steps
1

2
RC Steps is a React component library that provides a comprehensive steps UI component for creating step-by-step user interfaces. It supports both horizontal and vertical layouts, multiple step types, customizable icons and styling, and offers both controlled and uncontrolled usage patterns for multi-step workflows, wizards, and progress indicators.
3

4
## Package Information
5

6
- **Package Name**: rc-steps
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install rc-steps`
10
- **Version**: 5.0.0
11

12
## Core Imports
13

14
```typescript
15
import Steps, { Step, type StepsProps, type Status } from "rc-steps";
16
```
17

18
For CommonJS:
19

20
```javascript
21
const Steps = require("rc-steps");
22
const { Step } = Steps;
23
```
24

25
Import CSS styles:
26

27
```javascript
28
import "rc-steps/assets/index.css";
29
```
30

31
## Basic Usage
32

33
```typescript
34
import React, { useState } from "react";
35
import Steps from "rc-steps";
36
import "rc-steps/assets/index.css";
37

38
// Items-based approach (recommended)
39
function StepsExample() {
40
  const [current, setCurrent] = useState(0);
41

42
  const items = [
43
    {
44
      title: "Finished",
45
      description: "This is a description",
46
    },
47
    {
48
      title: "In Progress", 
49
      description: "This is a description",
50
    },
51
    {
52
      title: "Waiting",
53
      description: "This is a description",
54
    },
55
  ];
56

57
  return (
58
    <Steps 
59
      current={current} 
60
      onChange={setCurrent}
61
      items={items}
62
    />
63
  );
64
}
65

66
// Traditional children approach
67
function StepsChildrenExample() {
68
  return (
69
    <Steps current={1}>
70
      <Steps.Step title="First" description="Description 1" />
71
      <Steps.Step title="Second" description="Description 2" />
72
      <Steps.Step title="Third" description="Description 3" />
73
    </Steps>
74
  );
75
}
76
```
77

78
## Architecture
79

80
RC Steps is built with the following key components:
81

82
- **Steps Container**: Main component that manages step state and layout
83
- **Step Items**: Individual step components with icons, titles, and descriptions
84
- **Layout System**: Supports horizontal and vertical directions with responsive styling
85
- **Status Management**: Automatic status calculation based on current step index
86
- **Navigation Support**: Optional click handlers for step navigation
87
- **Customization Layer**: Extensive theming through CSS classes and custom renderers
88

89
## Capabilities
90

91
### Steps Component
92

93
Main container component that renders a sequence of steps with automatic status management and optional navigation.
94

95
```typescript { .api }
96
interface StepsProps {
97
  /** CSS class name prefix for styling */
98
  prefixCls?: string;
99
  /** Inline styles for the steps container */
100
  style?: React.CSSProperties;
101
  /** Additional CSS class names */
102
  className?: string;
103
  /** Child Step components (alternative to items prop) */
104
  children?: React.ReactNode;
105
  /** Layout direction of steps */
106
  direction?: 'horizontal' | 'vertical';
107
  /** Visual type of steps */
108
  type?: 'default' | 'navigation';
109
  /** Label placement relative to step icons */
110
  labelPlacement?: 'horizontal' | 'vertical';
111
  /** Icon CSS class prefix */
112
  iconPrefix?: string;
113
  /** Status of the current step */  
114
  status?: Status;
115
  /** Size variant of steps */
116
  size?: 'default' | 'small';
117
  /** Index of currently active step (0-based) */
118
  current?: number;
119
  /** Progress dot configuration - boolean or custom render function */
120
  progressDot?: ProgressDotRender | boolean;
121
  /** Custom step icon renderer function */
122
  stepIcon?: StepIconRender;
123
  /** Starting index offset for step numbering */
124
  initial?: number;
125
  /** Custom icons for finish and error states */
126
  icons?: Icons;
127
  /** Array of step configurations (recommended approach) */
128
  items?: StepProps[];
129
  /** Callback fired when step is clicked */
130
  onChange?: (current: number) => void;
131
}
132

133
declare class Steps extends React.Component<StepsProps> {
134
  /** Reference to Step component for traditional usage */
135
  static Step = Step;
136
  
137
  /** Default prop values */
138
  static defaultProps = {
139
    type: 'default',
140
    prefixCls: 'rc-steps',
141
    iconPrefix: 'rc',
142
    direction: 'horizontal',
143
    labelPlacement: 'horizontal',
144
    initial: 0,
145
    current: 0,
146
    status: 'process',
147
    size: '',
148
    progressDot: false,
149
  };
150
}
151

152
export default Steps;
153
export { Step, type StepsProps, type StepProps, type Status, type Icons, type StepIconRender, type ProgressDotRender };
154
```
155

156
### Step Component
157

158
Individual step component that can be used as child of Steps or configured via items array.
159

160
```typescript { .api }
161
interface StepProps {
162
  /** CSS class name prefix */
163
  prefixCls?: string;
164
  /** Additional CSS class names */
165
  className?: string;
166
  /** Inline styles for step item */
167
  style?: React.CSSProperties;
168
  /** Wrapper element styles */
169
  wrapperStyle?: React.CSSProperties;
170
  /** Icon CSS class prefix */
171
  iconPrefix?: string;
172
  /** Whether this step is currently active */
173
  active?: boolean;
174
  /** Whether this step is disabled for interaction */
175
  disabled?: boolean;
176
  /** Step index in the sequence (0-based) */
177
  stepIndex?: number;
178
  /** Display number for step (1-based) */
179
  stepNumber?: number;
180
  /** Status of this step */
181
  status?: Status;
182
  /** Main title/label for the step */
183
  title?: React.ReactNode;
184
  /** Secondary subtitle text */
185
  subTitle?: React.ReactNode;
186
  /** Detailed description text */
187
  description?: React.ReactNode;
188
  /** Custom content in the step tail area */
189
  tailContent?: React.ReactNode;
190
  /** Custom icon element or string icon name */
191
  icon?: React.ReactNode;
192
  /** Custom icons for finish/error states */
193
  icons?: Icons;
194
  /** Click event handler for step container */
195
  onClick?: React.MouseEventHandler<HTMLDivElement>;
196
  /** Step click handler with step index */
197
  onStepClick?: (index: number) => void;
198
  /** Progress dot configuration */
199
  progressDot?: ProgressDotRender | boolean;
200
  /** Custom step icon renderer */
201
  stepIcon?: StepIconRender;
202
}
203

204
declare class Step extends React.Component<StepProps> {}
205

206
export { Step };
207
```
208

209
### Navigation and Interaction
210

211
Enable step navigation by providing onChange handler to Steps component.
212

213
```typescript
214
// Clickable steps with navigation
215
<Steps 
216
  current={current}
217
  onChange={(nextStep) => setCurrent(nextStep)}
218
  items={items}
219
/>
220

221
// Navigation type for horizontal tab-like interface
222
<Steps 
223
  type="navigation"
224
  current={current}
225
  onChange={(nextStep) => setCurrent(nextStep)}
226
  items={items}
227
/>
228

229
// Disable specific steps
230
const items = [
231
  { title: "Step 1" },
232
  { title: "Step 2", disabled: true },
233
  { title: "Step 3" },
234
];
235
```
236

237
### Custom Icons and Styling
238

239
Customize step appearance with icons, progress dots, and custom renderers.
240

241
```typescript
242
// Custom icons for finish/error states
243
const customIcons = {
244
  finish: <CheckIcon />,
245
  error: <ErrorIcon />,
246
};
247

248
<Steps icons={customIcons} items={items} />
249

250
// Progress dots instead of numbered steps
251
<Steps progressDot={true} items={items} />
252

253
// Custom progress dot renderer
254
<Steps 
255
  progressDot={(iconDot, {index, status, title}) => (
256
    <span className={`custom-dot ${status}`}>
257
      {status === 'finish' ? '✓' : index + 1}
258
    </span>
259
  )}
260
  items={items} 
261
/>
262

263
// Custom step icon renderer
264
<Steps
265
  stepIcon={({index, status, title, node}) => (
266
    <div className={`custom-icon ${status}`}>
267
      {status === 'process' ? <SpinnerIcon /> : node}
268
    </div>
269
  )}
270
  items={items}
271
/>
272

273
// Individual step icons
274
const items = [
275
  { title: "Upload", icon: <UploadIcon /> },
276
  { title: "Process", icon: "gear" }, // String icon name
277
  { title: "Complete", icon: <CheckIcon /> },
278
];
279
```
280

281
### Layout and Size Options
282

283
Control visual layout and sizing of the steps component.
284

285
```typescript
286
// Vertical layout
287
<Steps direction="vertical" items={items} />
288

289
// Small size variant
290
<Steps size="small" items={items} />
291

292
// Vertical label placement (for horizontal steps)
293
<Steps labelPlacement="vertical" items={items} />
294

295
// Custom styling
296
<Steps 
297
  className="my-steps"
298
  style={{ backgroundColor: '#f5f5f5' }}
299
  items={items}
300
/>
301
```
302

303
### Step Status Management
304

305
Control individual step statuses explicitly or rely on automatic status calculation.
306

307
```typescript
308
// Automatic status based on current prop
309
<Steps current={1} items={items} />
310
// Step 0: finish, Step 1: process, Step 2+: wait
311

312
// Error status on current step
313
<Steps current={1} status="error" items={items} />
314
// Step 0: finish, Step 1: error, Step 2+: wait
315

316
// Explicit step statuses
317
const items = [
318
  { title: "Step 1", status: "finish" },
319
  { title: "Step 2", status: "process" },
320
  { title: "Step 3", status: "error" },
321
  { title: "Step 4", status: "wait" },
322
];
323

324
<Steps items={items} />
325
```
326

327
## Types
328

329
```typescript { .api }
330
/** Step status values */
331
type Status = 'error' | 'process' | 'finish' | 'wait';
332

333
/** Custom icons for finish and error states */
334
interface Icons {
335
  finish: React.ReactNode;
336
  error: React.ReactNode;
337
}
338

339
/** Custom step icon renderer function */
340
type StepIconRender = (info: {
341
  /** Step index (0-based) */
342
  index: number;
343
  /** Current step status */
344
  status: Status;
345
  /** Step title content */
346
  title: React.ReactNode;
347
  /** Step description content */
348
  description: React.ReactNode;
349
  /** Default icon node */
350
  node: React.ReactNode;
351
}) => React.ReactNode;
352

353
/** Custom progress dot renderer function */
354
type ProgressDotRender = (
355
  /** Default dot element */
356
  iconDot,
357
  info: {
358
    /** Step index (0-based) */
359
    index: number;
360
    /** Current step status */
361
    status: Status;
362
    /** Step title content */
363
    title: React.ReactNode;
364
    /** Step description content */  
365
    description: React.ReactNode;
366
  }
367
) => React.ReactNode;
368
```
369

370
## CSS Classes
371

372
RC Steps uses CSS classes for styling with the default prefix `rc-steps`:
373

374
### Container Classes
375
- `rc-steps` - Base steps container
376
- `rc-steps-horizontal` - Horizontal layout
377
- `rc-steps-vertical` - Vertical layout  
378
- `rc-steps-small` - Small size variant
379
- `rc-steps-label-horizontal` - Horizontal label placement
380
- `rc-steps-label-vertical` - Vertical label placement
381
- `rc-steps-dot` - Progress dot mode
382
- `rc-steps-navigation` - Navigation type
383

384
### Step Item Classes
385
- `rc-steps-item` - Individual step container
386
- `rc-steps-item-wait` - Waiting step status
387
- `rc-steps-item-process` - Processing step status
388
- `rc-steps-item-finish` - Finished step status
389
- `rc-steps-item-error` - Error step status
390
- `rc-steps-item-active` - Currently active step
391
- `rc-steps-item-disabled` - Disabled step
392
- `rc-steps-item-custom` - Step with custom icon
393

394
### Element Classes
395
- `rc-steps-item-container` - Step clickable container
396
- `rc-steps-item-icon` - Step icon container
397
- `rc-steps-item-tail` - Step connector line
398
- `rc-steps-item-content` - Step text content area
399
- `rc-steps-item-title` - Step title text
400
- `rc-steps-item-subtitle` - Step subtitle text
401
- `rc-steps-item-description` - Step description text
402

403
## Usage Examples
404

405
### Wizard Form
406

407
```typescript
408
import React, { useState } from "react";
409
import Steps from "rc-steps";
410

411
function WizardForm() {
412
  const [current, setCurrent] = useState(0);
413
  
414
  const steps = [
415
    { title: "Account", description: "Basic information" },
416
    { title: "Verification", description: "Verify your identity" },
417
    { title: "Payment", description: "Choose your plan" },
418
    { title: "Complete", description: "Setup finished" },
419
  ];
420

421
  const next = () => setCurrent(current + 1);
422
  const prev = () => setCurrent(current - 1);
423

424
  return (
425
    <div>
426
      <Steps current={current} items={steps} />
427
      <div className="steps-content">
428
        {/* Form content based on current step */}
429
      </div>
430
      <div className="steps-action">
431
        {current > 0 && <button onClick={prev}>Previous</button>}
432
        {current < steps.length - 1 && <button onClick={next}>Next</button>}
433
        {current === steps.length - 1 && <button>Done</button>}
434
      </div>
435
    </div>
436
  );
437
}
438
```
439

440
### Status Indicator
441

442
```typescript
443
function ProcessStatus() {
444
  const [status, setStatus] = useState<'process' | 'error' | 'finish'>('process');
445
  
446
  const steps = [
447
    { title: "Submitted", description: "Application received" },
448
    { title: "Under Review", description: "Processing your request" }, 
449
    { title: "Approved", description: "Ready for next step" },
450
  ];
451

452
  return (
453
    <Steps 
454
      current={1}
455
      status={status}
456
      items={steps}
457
    />
458
  );
459
}
460
```
461

462
### Clickable Navigation
463

464
```typescript
465
function NavigableSteps() {
466
  const [current, setCurrent] = useState(0);
467
  
468
  const items = [
469
    { title: "Step 1", description: "First step" },
470
    { title: "Step 2", description: "Second step" },
471
    { title: "Step 3", description: "Final step", disabled: current < 2 },
472
  ];
473

474
  return (
475
    <Steps
476
      current={current}
477
      onChange={(step) => {
478
        // Custom navigation logic
479
        if (step <= current + 1) {
480
          setCurrent(step);
481
        }
482
      }}
483
      items={items}
484
    />
485
  );
486
}
487
```