reactjs-multi-stepper 1.3.1 → 1.3.2
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 +34 -46
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -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.2",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"repository": {
|
|
9
9
|
"url": "https://github.com/UppiliSrinivas/react-stepper/tree/multi-stepper"
|