Skip to content

Commit f435bce

Browse files
committed
docs: add wrapper prop in README
1 parent b5e2959 commit f435bce

1 file changed

Lines changed: 11 additions & 2 deletions

File tree

README.md

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ Example: pass a footer component that contains a "previous" and "next" button to
8484
| startIndex | number | Indicate the wizard to start at the given step || 0 |
8585
| header | React.ReactNode | Header that is shown above the active step || |
8686
| footer | React.ReactNode | Footer that is shown below the active stepstep || |
87+
| wrapper | React.React.ReactElement | Optional wrapper that is exclusively wrapped around the active step component. It is not wrapped around the `header` and `footer` || |
8788
| children | React.ReactNode | Each child component will be treated as an individual step | ✔️ |
8889

8990
#### Example
@@ -95,9 +96,17 @@ const Header = () => <p>I am the header component</p>;
9596
// Example: show the "previous" and "next" buttons in the footer
9697
const Footer = () => <p>I am the footer component</p>;
9798

99+
// Example: Wrap steps in an `<AnimatePresence` from framer-motion
100+
const Wrapper = () => <AnimatePresence exitBeforeEnter />;
101+
98102
const App = () => {
99103
return (
100-
<Wizard startIndex={0} header={<Header />} footer={<Footer />}>
104+
<Wizard
105+
startIndex={0}
106+
header={<Header />}
107+
footer={<Footer />}
108+
wrapper={<Wrapper />}
109+
>
101110
<Step1 />
102111
<Step2 />
103112
<Step3 />
@@ -236,7 +245,7 @@ If an async function is attached to `handleStep` the `isLoading` property will i
236245

237246
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.
238247

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.
248+
Checkout this [example](https://github.com/devrnt/react-use-wizard/tree/feat/wizard-wrapper/playground/modules/wizard/animated) to see how a step can be animated with framer motion.
240249

241250
## IE11
242251

0 commit comments

Comments
 (0)