You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+31-24Lines changed: 31 additions & 24 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,11 +12,10 @@
12
12
13
13
## Features
14
14
15
-
-Hooks
15
+
-Simplicity
16
16
- Focused on logic
17
17
- No UI restrictions
18
18
- Written in TypeScript
19
-
- Documented, self explaining methods
20
19
21
20
## Installation
22
21
@@ -72,25 +71,26 @@ const Step1 = () => {
72
71
73
72
### Wizard
74
73
75
-
`Wizard` is used to wrap your steps. Each child component will be treated as an individual step. You can pass a shared `footer` and `header` component that should always be in your steps.
74
+
`Wizard` is used to wrap your steps. Each child component will be treated as an individual step. You can pass a shared `footer` and `header` component that should always be in your steps.
76
75
77
76
Example: pass a footer component that contains a "previous" and "next" button to the wizard.
78
77
79
78
#### Props
80
79
81
-
| name | type | description | required | default |
| startIndex | number | Indicate the wizard to start at the given step | ❌ | 0 |
83
+
| header | React.ReactNode | Header that is shown above the active step | ❌ ||
84
+
| footer | React.ReactNode | Footer that is shown below the active stepstep | ❌ ||
85
+
| children | React.ReactNode | Each child component will be treated as an individual step | ✔️ |
87
86
88
87
#### Example
89
88
90
89
```javascript
91
-
// Example: show the active step in this component
90
+
// Example: show the active step in the header
92
91
constHeader= () =><p>I am the header component</p>;
93
92
93
+
// Example: show the "previous" and "next" buttons in the footer
94
94
constFooter= () =><p>I am the footer component</p>;
95
95
96
96
constApp= () => {
@@ -106,22 +106,24 @@ const App = () => {
106
106
107
107
### useWizard
108
108
109
-
Used to retrieve all methods and properties related to your wizard. Make sure `Wizard` is wrapped around your component when calling `useWizard`.
109
+
Used to retrieve all methods and properties related to your wizard. Make sure `Wizard` is wrapped around your component when calling `useWizard`.
110
+
111
+
`handleStep` is used to attach a handler to the step, can either be `async` or a `sync` function. This function will be invoked when calling `nextStep`.
110
112
111
113
**Remark** - You can't use `useWizard` in the same component where `Wizard` is used.
| nextStep | () => Promise<void>| Go to the next step|
118
-
| previousStep | () => void| Go to the previous step|
119
-
| handleStep | (handler: Handler) => void| Attach a callback that will be called when calling `nextStep`. `handler` can be either sync or async|
120
-
| isLoading | boolean|\* Will reflect the handler promise state: will be `true` if the handler promise is pending and `false` when the handler is either fulfilled or rejected |
121
-
| activeStep | number| The current active step of the wizard|
122
-
| isFirstStep | boolean| Indicate if the current step is the first step (aka no previous step)|
123
-
| isLastStep | boolean| Indicate if the current step is the last step (aka no next step)|
| nextStep | () => Promise<void>| Go to the next step|
120
+
| previousStep | () => void| Go to the previous step|
121
+
| handleStep | (handler: Handler) => void | Attach a callback that will be called when calling `nextStep`. `handler` can be either sync or async|
122
+
| isLoading | boolean|\* Will reflect the handler promise state: will be `true` if the handler promise is pending and `false` when the handler is either fulfilled or rejected |
123
+
| activeStep | number| The current active step of the wizard|
124
+
| isFirstStep | boolean| Indicate if the current step is the first step (aka no previous step)|
125
+
| isLastStep | boolean| Indicate if the current step is the last step (aka no next step)|
126
+
||
125
127
126
128
#### Example
127
129
@@ -149,6 +151,7 @@ const Step1 = () => {
149
151
handleStep,
150
152
} =useWizard();
151
153
154
+
// This handler is optional
152
155
handleStep(() => {
153
156
alert('Going to step 2');
154
157
});
@@ -173,6 +176,7 @@ const Step1 = () => {
173
176
It's recommended to pass the shared components to the `header` or `footer` in the `Wizard` to avoid duplication.
174
177
175
178
## Examples
179
+
176
180
Go to [examples](https://github.com/devrnt/react-use-wiard/tree/master/examples) to check see some examples
177
181
178
182
## Async
@@ -200,14 +204,17 @@ const Step1 = () => {
200
204
```
201
205
202
206
### Errors
207
+
203
208
If no errors are thrown then the wizard will go to the next step, so no need to call `nextStep` by yourself.
204
209
205
-
If an error is thrown in the conencted function the wizard will just stay at the same step and will rethrow the error. (So you can try-catch in your attached function).
210
+
If an error is thrown in the attached function the wizard will just stay at the same step and will rethrow the error. (So you can try-catch in your attached function).
206
211
207
212
### IsLoading
213
+
208
214
If an async function is attached to `handleStep` the `isLoading` property will indicate the loading state of the function. In general `isLoading` will reflect the handler promise state: will be `true` if the handler promise is pending and `false` when the handler is either fulfilled or rejected.
209
215
210
216
## Animation
211
-
Since `react-use-wizard` is focused to manage the logic of a wizard it doesn't mean you can't add some animation by your own. Add any animation library that you like. I highly suggest [framer-motion](https://www.framer.com/motion/) to add your animations.
212
217
213
-
Checkout this [example](https://github.com/devrnt/react-use-wizard/blob/docs/readme/example/components/animatedStep.tsx) to see how a step can be animated with framer motion.
218
+
Since `react-use-wizard` is focused to manage the logic of a wizard it doesn't mean you can't add some animation by your own. Add any animation library that you like. I highly suggest [framer-motion](https://www.framer.com/motion/) to add your animations.
219
+
220
+
Checkout this [example](https://github.com/devrnt/react-use-wizard/blob/docs/readme/example/components/animatedStep.tsx) to see how a step can be animated with framer motion.
0 commit comments