Skip to content

Commit ab530c2

Browse files
devrntdevrnt
authored
Merge pull request #88 from ulken/fix-readme_formatting
Consistent formatting of README
2 parents ca885f7 + bb3caf4 commit ab530c2

1 file changed

Lines changed: 22 additions & 17 deletions

File tree

‎README.md‎

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -108,24 +108,24 @@ const App = () => {
108108

109109
### useWizard
110110

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`.
112112

113113
`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`.
114114

115115
**Remark** - You can't use `useWizard` in the same component where `Wizard` is used.
116116

117117
#### Methods
118118

119-
| name | type | description |
120-
| ------------ | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
121-
| 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) |
119+
| name | type | description |
120+
| ------------ | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
121+
| 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) |
129129
| |
130130

131131
#### Example
@@ -180,16 +180,20 @@ const Step1 = () => {
180180
It's recommended to pass the shared components to the `header` or `footer` in the `Wizard` to avoid duplication.
181181

182182
## Playground
183+
183184
Small playground to showcase the functionalities of `react-use-wizard`:
184185
[https://devrnt.github.io/react-use-wizard/](https://devrnt.github.io/react-use-wizard/)
185186

186187
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)
190188

191-
Source code can be found [here](https://github.com/devrnt/react-use-wizard/tree/main/playground).
189+
- Simple wizard with async and sync steps
190+
- Animated wizard with sync steps
191+
- Integration with [react-query](https://react-query.tanstack.com/) (mutation on next step)
192+
193+
Source code can be found [here](https://github.com/devrnt/react-use-wizard/tree/main/playground).
194+
192195
## Examples
196+
193197
Go to [examples](https://github.com/devrnt/react-use-wizard/tree/master/examples) to check out some integrations (Gatsby, NextJS...).
194198

195199
## Async
@@ -230,9 +234,10 @@ If an async function is attached to `handleStep` the `isLoading` property will i
230234

231235
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.
232236

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.
237+
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.
234238

235239
## IE11
240+
236241
Since Internet Explorer 11 doesn't support promises or async functions you'll need to install a polyfill for the `regenerator-runtime`.
237242

238-
In general using [react-app-polyfill](https://www.npmjs.com/package/react-app-polyfill) is recommended, it includes polyfills for various browsers.
243+
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

Comments
 (0)