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
+24-17Lines changed: 24 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -108,24 +108,25 @@ const App = () => {
108
108
109
109
### useWizard
110
110
111
-
Used to retrieve all methods and properties related to your wizard. Make sure `Wizard` is wrapped around your component when calling `useWizard`.
111
+
Used to retrieve all methods and properties related to your wizard. Make sure `Wizard` is wrapped around your component when calling `useWizard`.
112
112
113
113
`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`.
114
114
115
115
**Remark** - You can't use `useWizard` in the same component where `Wizard` is used.
| nextStep | () => Promise<void> | Go to the next step |
122
-
| previousStep | () => void | Go to the previous step index |
123
-
| goToStep | (stepIndex: number) => void | Go to the given step index |
124
-
| handleStep | (handler: Handler) => void | Attach a callback that will be called when calling `nextStep`. `handler` can be either sync or async |
125
-
| 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 |
126
-
| activeStep | number | The current active step of the wizard |
127
-
| isFirstStep | boolean | Indicate if the current step is the first step (aka no previous step) |
128
-
| isLastStep | boolean | Indicate if the current step is the last step (aka no next step) |
| nextStep | () => Promise<void> | Go to the next step |
122
+
| previousStep | () => void | Go to the previous step index |
123
+
| goToStep | (stepIndex: number) => void | Go to the given step index |
124
+
| handleStep | (handler: Handler) => void | Attach a callback that will be called when calling `nextStep`. `handler` can be either sync or async |
125
+
| 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 |
126
+
| activeStep | number | The current active step of the wizard |
127
+
| stepCount | number | The total number of steps of the wizard |
128
+
| isFirstStep | boolean | Indicate if the current step is the first step (aka no previous step) |
129
+
| isLastStep | boolean | Indicate if the current step is the last step (aka no next step) |
129
130
||
130
131
131
132
#### Example
@@ -149,6 +150,7 @@ const Step1 = () => {
149
150
isLastStep,
150
151
isFirstStep,
151
152
activeStep,
153
+
stepCount,
152
154
previousStep,
153
155
nextStep,
154
156
goToStep,
@@ -180,16 +182,20 @@ const Step1 = () => {
180
182
It's recommended to pass the shared components to the `header` or `footer` in the `Wizard` to avoid duplication.
181
183
182
184
## Playground
185
+
183
186
Small playground to showcase the functionalities of `react-use-wizard`:
Following use cases are available in the playground
187
-
- Simple wizard with async and sync steps
188
-
- Animated wizard with sync steps
189
-
- Integration with [react-query](https://react-query.tanstack.com/) (mutation on next step)
190
190
191
-
Source code can be found [here](https://github.com/devrnt/react-use-wizard/tree/main/playground).
191
+
- Simple wizard with async and sync steps
192
+
- Animated wizard with sync steps
193
+
- Integration with [react-query](https://react-query.tanstack.com/) (mutation on next step)
194
+
195
+
Source code can be found [here](https://github.com/devrnt/react-use-wizard/tree/main/playground).
196
+
192
197
## Examples
198
+
193
199
Go to [examples](https://github.com/devrnt/react-use-wizard/tree/master/examples) to check out some integrations (Gatsby, NextJS...).
194
200
195
201
## Async
@@ -230,9 +236,10 @@ If an async function is attached to `handleStep` the `isLoading` property will i
230
236
231
237
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.
232
238
233
-
Checkout this [example](https://github.com/devrnt/react-use-wizard/blob/main/playground/components/animatedStep.tsx) to see how a step can be animated with framer motion.
239
+
Checkout this [example](https://github.com/devrnt/react-use-wizard/blob/main/playground/components/animatedStep.tsx) to see how a step can be animated with framer motion.
234
240
235
241
## IE11
242
+
236
243
Since Internet Explorer 11 doesn't support promises or async functions you'll need to install a polyfill for the `regenerator-runtime`.
237
244
238
-
In general using [react-app-polyfill](https://www.npmjs.com/package/react-app-polyfill) is recommended, it includes polyfills for various browsers.
245
+
In general using [react-app-polyfill](https://www.npmjs.com/package/react-app-polyfill) is recommended, it includes polyfills for various browsers.
0 commit comments