reactjs-multi-stepper 1.3.1 → 1.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +35 -47
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -15,7 +15,7 @@ It allows you to create step-based workflows such as onboarding, multi-step form
|
|
|
15
15
|
- 🎨 Fully customizable step styles (active, completed)
|
|
16
16
|
- ⚡ Built with **TypeScript** for type safety
|
|
17
17
|
- 🧩 Context-based state management with hooks
|
|
18
|
-
- 🧪 Tested with **Vitest** + **React Testing Library**
|
|
18
|
+
- 🧪 Tested with **Vitest** + **React Testing Library** (83% coverage)
|
|
19
19
|
|
|
20
20
|
---
|
|
21
21
|
|
|
@@ -37,29 +37,44 @@ yarn add react-multi-stepper
|
|
|
37
37
|
import React from "react";
|
|
38
38
|
import { MultiStepperProvider, MultiStepper, useMultiStepper } from "react-multi-stepper";
|
|
39
39
|
|
|
40
|
+
|
|
41
|
+
|
|
40
42
|
function App() {
|
|
41
43
|
return (
|
|
42
44
|
<MultiStepperProvider steppers={[
|
|
43
45
|
{
|
|
44
46
|
id: 1,
|
|
45
|
-
title: "
|
|
46
|
-
description: "
|
|
47
|
-
children: <
|
|
47
|
+
title: "Step one",
|
|
48
|
+
description: "Step one description",
|
|
49
|
+
children: <div className='test-step' style={{
|
|
50
|
+
backgroundColor: "#0000FF90",
|
|
51
|
+
}}>
|
|
52
|
+
<h3>Step One Content</h3>
|
|
53
|
+
</div>
|
|
48
54
|
},
|
|
49
55
|
{
|
|
50
56
|
id: 2,
|
|
51
|
-
title: "
|
|
52
|
-
description: "
|
|
53
|
-
children: <
|
|
57
|
+
title: "Step Two",
|
|
58
|
+
description: "Step Two description",
|
|
59
|
+
children: <div className='test-step' style={{
|
|
60
|
+
backgroundColor: "#FF000090",
|
|
61
|
+
}}>
|
|
62
|
+
<h3>Step Two Content</h3>
|
|
63
|
+
</div>
|
|
54
64
|
},
|
|
55
65
|
{
|
|
56
66
|
id: 3,
|
|
57
|
-
title: "
|
|
58
|
-
description: "
|
|
59
|
-
children: <
|
|
67
|
+
title: "Step Three",
|
|
68
|
+
description: "Step Three description",
|
|
69
|
+
children: <div className='test-step' style={{
|
|
70
|
+
backgroundColor: "#80008090",
|
|
71
|
+
}}>
|
|
72
|
+
<h3>Step Three Content</h3>
|
|
73
|
+
</div>
|
|
60
74
|
}
|
|
61
|
-
]}
|
|
62
|
-
|
|
75
|
+
]}
|
|
76
|
+
>
|
|
77
|
+
<ReactMultiStepper />
|
|
63
78
|
</MultiStepperProvider>
|
|
64
79
|
);
|
|
65
80
|
}
|
|
@@ -68,45 +83,18 @@ function App() {
|
|
|
68
83
|
### 2. Create your stepper component
|
|
69
84
|
|
|
70
85
|
```javascript
|
|
71
|
-
function
|
|
72
|
-
const { handleNextStep, setStepStatus } = useMultiStepper();
|
|
73
|
-
|
|
74
|
-
const validateAndProceed = async () => {
|
|
75
|
-
try {
|
|
76
|
-
setStepStatus("completed");
|
|
77
|
-
handleNextStep();
|
|
78
|
-
} catch (error) {
|
|
79
|
-
}
|
|
80
|
-
};
|
|
81
|
-
|
|
82
|
-
return <MultiStepper onClickNext={validateAndProceed} />;
|
|
83
|
-
}
|
|
84
|
-
```
|
|
85
|
-
|
|
86
|
+
function ReactMultiStepper() {
|
|
86
87
|
|
|
87
|
-
|
|
88
|
+
const { handleNextStep, setStepStatus } = useMultiStepper()
|
|
88
89
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
children: (
|
|
96
|
-
<div className="custom-step">
|
|
97
|
-
<h3>Custom Step Content</h3>
|
|
98
|
-
<form>
|
|
99
|
-
<input type="text" placeholder="Enter data..." />
|
|
100
|
-
</form>
|
|
101
|
-
</div>
|
|
102
|
-
)
|
|
103
|
-
},
|
|
104
|
-
// ... more steps
|
|
105
|
-
];
|
|
90
|
+
const validateStepContent = () => {
|
|
91
|
+
setStepStatus("completed")
|
|
92
|
+
handleNextStep()
|
|
93
|
+
}
|
|
94
|
+
return <MultiStepper onClickNext={validateStepContent} />
|
|
95
|
+
}
|
|
106
96
|
```
|
|
107
97
|
|
|
108
|
-
---
|
|
109
|
-
|
|
110
98
|
## 🧩 API Reference
|
|
111
99
|
|
|
112
100
|
### MultiStepperProvider Props
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"main": "./dist/multi-stepper.umd.js",
|
|
4
4
|
"module": "./dist/multi-stepper.es.js",
|
|
5
5
|
"types": "./dist/index.d.ts",
|
|
6
|
-
"version": "1.3.
|
|
6
|
+
"version": "1.3.3",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"repository": {
|
|
9
9
|
"url": "https://github.com/UppiliSrinivas/react-stepper/tree/multi-stepper"
|