reactjs-multi-stepper 1.1.7 โ 1.1.8
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 +57 -66
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,69 +1,60 @@
|
|
|
1
|
-
# React
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
// Alternatively, use this for stricter rules
|
|
25
|
-
...tseslint.configs.strictTypeChecked,
|
|
26
|
-
// Optionally, add this for stylistic rules
|
|
27
|
-
...tseslint.configs.stylisticTypeChecked,
|
|
28
|
-
|
|
29
|
-
// Other configs...
|
|
30
|
-
],
|
|
31
|
-
languageOptions: {
|
|
32
|
-
parserOptions: {
|
|
33
|
-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
34
|
-
tsconfigRootDir: import.meta.dirname,
|
|
35
|
-
},
|
|
36
|
-
// other options...
|
|
37
|
-
},
|
|
38
|
-
},
|
|
39
|
-
])
|
|
1
|
+
# React Multi Stepper
|
|
2
|
+
|
|
3
|
+
A lightweight, customizable, and reusable multi-stepper component for React.
|
|
4
|
+
It allows you to create step-based workflows such as onboarding, multi-step forms, or guided processes with ease.
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## ๐ Features
|
|
9
|
+
|
|
10
|
+
- โ
Easy to use and integrate into any React project
|
|
11
|
+
- ๐จ Fully customizable step styles (active, completed, upcoming)
|
|
12
|
+
- โก Built with **TypeScript** for type safety
|
|
13
|
+
- ๐งฉ Includes context + hooks for flexible state management
|
|
14
|
+
- ๐งช Tested with **Vitest** + **React Testing Library**
|
|
15
|
+
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
## ๐ฆ Installation
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
npm install react-multi-stepper
|
|
22
|
+
# or
|
|
23
|
+
yarn add react-multi-stepper
|
|
40
24
|
```
|
|
41
25
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
import
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
{
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
// other options...
|
|
66
|
-
},
|
|
67
|
-
},
|
|
68
|
-
])
|
|
26
|
+
---
|
|
27
|
+
|
|
28
|
+
## ๐จ Usage
|
|
29
|
+
|
|
30
|
+
```javascript
|
|
31
|
+
import React from "react";
|
|
32
|
+
import { MultiStepper } from "react-multi-stepper";
|
|
33
|
+
|
|
34
|
+
const steps = [
|
|
35
|
+
{ title: "Step 1", description: "Personal Info", active: true, completed: false },
|
|
36
|
+
{ title: "Step 2", description: "Address Details", active: false, completed: false },
|
|
37
|
+
{ title: "Step 3", description: "Review", active: false, completed: false },
|
|
38
|
+
];
|
|
39
|
+
|
|
40
|
+
export default function App() {
|
|
41
|
+
const handleNext = () => {
|
|
42
|
+
console.log("Next step clicked");
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
return (
|
|
46
|
+
<MultiStepper steps={steps} onClickNext={handleNext} />
|
|
47
|
+
);
|
|
48
|
+
}
|
|
69
49
|
```
|
|
50
|
+
|
|
51
|
+
---
|
|
52
|
+
|
|
53
|
+
## ๐งฉ API Reference
|
|
54
|
+
|
|
55
|
+
### MultiStepper Props
|
|
56
|
+
|
|
57
|
+
| Prop | Type | Required | Description |
|
|
58
|
+
| ------------- | ------------ | -------- | -------------------------------------------------------------- |
|
|
59
|
+
| `steps` | `StepType[]` | โ
| Array of steps (`title`, `description`, `active`, `completed`) |
|
|
60
|
+
| `onClickNext` | `() => void` | โ
| Callback triggered when the "Next" button is clicked |
|