reactjs-multi-stepper 1.3.5 → 1.3.6

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.
Files changed (2) hide show
  1. package/README.md +73 -55
  2. package/package.json +5 -7
package/README.md CHANGED
@@ -5,7 +5,7 @@ It allows you to create step-based workflows such as onboarding, multi-step form
5
5
 
6
6
  ## 🎬 Demo
7
7
 
8
- ![React Multi Stepper Demo](https://github.com/UppiliSrinivas/react-stepper/blob/main/src/assets/react-multi-stepper-demo.gif)
8
+ ![Image](https://github.com/user-attachments/assets/b80b151d-7b6f-4233-aa90-7672279d8049)
9
9
 
10
10
  ---
11
11
 
@@ -22,77 +22,95 @@ It allows you to create step-based workflows such as onboarding, multi-step form
22
22
  ## 📦 Installation
23
23
 
24
24
  ```bash
25
- npm install react-multi-stepper
25
+ npm install reactjs-multi-stepper
26
26
  # or
27
- yarn add react-multi-stepper
27
+ yarn add reactjs-multi-stepper
28
28
  ```
29
29
 
30
30
  ---
31
31
 
32
32
  ## 🔨 Basic Usage
33
33
 
34
- ### 1. Wrap your app with MultiStepperProvider
35
-
36
34
  ```javascript
37
- import React from "react";
38
- import { MultiStepperProvider, MultiStepper, useMultiStepper } from "react-multi-stepper";
39
-
40
-
35
+ import {
36
+ MultiStepper,
37
+ MultiStepperProvider,
38
+ useMultiStepper,
39
+ } from "reactjs-multi-stepper";
41
40
 
42
41
  function App() {
42
+ // Define reusable base style
43
+ const baseContentStyle = {
44
+ width: "60%",
45
+ height: "10vh",
46
+ marginBlock: "5vh",
47
+ display: "flex",
48
+ justifyContent: "center",
49
+ alignItems: "center",
50
+ borderRadius: "0.5vw",
51
+ };
52
+
53
+ const Component = () => {
54
+ const { handleNextStep } = useMultiStepper();
55
+ return <MultiStepper onClickNext={handleNextStep} />;
56
+ };
57
+
43
58
  return (
44
- <MultiStepperProvider steppers={[
45
- {
46
- id: 1,
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>
54
- },
55
- {
56
- id: 2,
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>
64
- },
65
- {
66
- id: 3,
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>
74
- }
75
- ]}
59
+ <MultiStepperProvider
60
+ steppers={[
61
+ {
62
+ active: true,
63
+ title: "Step One",
64
+ children: (
65
+ <div
66
+ style={{
67
+ ...baseContentStyle,
68
+ backgroundColor: "rgba(255, 0, 0, 0.5)",
69
+ }}
70
+ >
71
+ Step One Content
72
+ </div>
73
+ ),
74
+ },
75
+ {
76
+ id: 2,
77
+ active: false,
78
+ title: "Step Two",
79
+ children: (
80
+ <div
81
+ style={{
82
+ ...baseContentStyle,
83
+ backgroundColor: "rgba(0, 0, 255, 0.5)",
84
+ }}
85
+ >
86
+ Step Two Content
87
+ </div>
88
+ ),
89
+ },
90
+ {
91
+ id: 3,
92
+ active: false,
93
+ title: "Step Three",
94
+ children: (
95
+ <div
96
+ style={{
97
+ ...baseContentStyle,
98
+ backgroundColor: "rgba(0, 128, 0, 0.5)",
99
+ }}
100
+ >
101
+ Step Three Content
102
+ </div>
103
+ ),
104
+ },
105
+ ]}
76
106
  >
77
- <ReactMultiStepper />
107
+ <Component />
78
108
  </MultiStepperProvider>
79
109
  );
80
110
  }
81
- ```
82
111
 
83
- ### 2. Create your stepper component
112
+ export default App;
84
113
 
85
- ```javascript
86
- function ReactMultiStepper() {
87
-
88
- const { handleNextStep, setStepStatus } = useMultiStepper()
89
-
90
- const validateStepContent = () => {
91
- setStepStatus("completed")
92
- handleNextStep()
93
- }
94
- return <MultiStepper onClickNext={validateStepContent} />
95
- }
96
114
  ```
97
115
 
98
116
  ## 🧩 API Reference
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "reactjs-multi-stepper",
3
- "version": "1.3.5",
3
+ "version": "1.3.6",
4
4
  "type": "module",
5
5
  "exports": {
6
6
  ".": {
@@ -14,7 +14,6 @@
14
14
  "style": "./dist/index.css",
15
15
  "files": [
16
16
  "dist",
17
- "assets",
18
17
  "README.md",
19
18
  "LICENSE"
20
19
  ],
@@ -30,11 +29,7 @@
30
29
  "typecheck": "tsc --noEmit",
31
30
  "preview": "vite preview"
32
31
  },
33
- "dependencies": {
34
- "react": "^18.0.0 || ^19.2.0",
35
- "react-dom": "^18.0.0 || ^19.2.0",
36
- "react-multi-stepper": "file:react-multi-stepper-1.3.5.tgz"
37
- },
32
+ "dependencies": {},
38
33
  "devDependencies": {
39
34
  "@eslint/js": "^9.39.1",
40
35
  "@testing-library/jest-dom": "^6.9.1",
@@ -47,6 +42,9 @@
47
42
  "eslint-plugin-react-hooks": "^7.0.1",
48
43
  "eslint-plugin-react-refresh": "^0.4.24",
49
44
  "globals": "^16.5.0",
45
+ "react": "^18.0.0 || ^19.2.0",
46
+ "react-dom": "^18.0.0 || ^19.2.0",
47
+ "rollup-plugin-visualizer": "^6.0.5",
50
48
  "typescript": "^5.9.3",
51
49
  "vite": "^7.2.4",
52
50
  "vite-plugin-dts": "^4.5.4",