Skip to content

Commit 46cde06

Browse files
devrntdevrnt
committed
docs: update readme
1 parent a865f0d commit 46cde06

File tree

1 file changed

+31
-24
lines changed

1 file changed

+31
-24
lines changed

‎README.md‎

Lines changed: 31 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,10 @@
1212

1313
## Features
1414

15-
- Hooks
15+
- Simplicity
1616
- Focused on logic
1717
- No UI restrictions
1818
- Written in TypeScript
19-
- Documented, self explaining methods
2019

2120
## Installation
2221

@@ -72,25 +71,26 @@ const Step1 = () => {
7271

7372
### Wizard
7473

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.
7675

7776
Example: pass a footer component that contains a "previous" and "next" button to the wizard.
7877

7978
#### Props
8079

81-
| name | type | description | required | default |
82-
| ---------- | --------------- | ------------------------------------------------------------- | -------- | ------- |
83-
| startIndex | number | Indicate the wizard to start at the given step | ❌ | 0 |
84-
| header | React.ReactNode | Header that is shown above the active step | ❌ | |
85-
| footer | React.ReactNode | Footer that is shown below the active stepstep | ❌ | |
86-
| children | React.ReactNode | Each child component will be treated as an individual step | ✔️ |
80+
| name | type | description | required | default |
81+
| ---------- | --------------- | ---------------------------------------------------------- | -------- | ------- |
82+
| 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 | ✔️ |
8786

8887
#### Example
8988

9089
```javascript
91-
// Example: show the active step in this component
90+
// Example: show the active step in the header
9291
const Header = () => <p>I am the header component</p>;
9392

93+
// Example: show the "previous" and "next" buttons in the footer
9494
const Footer = () => <p>I am the footer component</p>;
9595

9696
const App = () => {
@@ -106,22 +106,24 @@ const App = () => {
106106

107107
### useWizard
108108

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

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

113115
#### Methods
114116

115-
| name | type | description |
116-
| ----------------------------------------------------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------- |
117-
| 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) |
124-
| |
117+
| name | type | description |
118+
| ------------ | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
119+
| 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+
| |
125127

126128
#### Example
127129

@@ -149,6 +151,7 @@ const Step1 = () => {
149151
handleStep,
150152
} = useWizard();
151153

154+
// This handler is optional
152155
handleStep(() => {
153156
alert('Going to step 2');
154157
});
@@ -173,6 +176,7 @@ const Step1 = () => {
173176
It's recommended to pass the shared components to the `header` or `footer` in the `Wizard` to avoid duplication.
174177

175178
## Examples
179+
176180
Go to [examples](https://github.com/devrnt/react-use-wiard/tree/master/examples) to check see some examples
177181

178182
## Async
@@ -200,14 +204,17 @@ const Step1 = () => {
200204
```
201205

202206
### Errors
207+
203208
If no errors are thrown then the wizard will go to the next step, so no need to call `nextStep` by yourself.
204209

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).
206211

207212
### IsLoading
213+
208214
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.
209215

210216
## 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.
212217

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

Comments
 (0)