@rahsheen/react-wizard
v2.1.2
@rahsheen/react-wizard React component
0/weekUpdated 3 years agoMITUnpacked: 33.4 KB
Published by Rahsheen A. Porter
npm install @rahsheen/react-wizard@rahsheen/react-wizard
!npm (scoped)
React Wizard is a flexible wizard / multi-step form component which can be used with React or React-Native.
Making use of render props (and hooks internally), React Wizard allows you to control exactly how each step is rendered. The ultimate goal will be to not only provide the tools to build a custom wizard, but also provide simpler API's for more specific use-cases.
Examples
$3
`` Step {currentIndex}javascript`
{({ nextStep, prevStep, currentIndex }) => {
return (
Step {currentIndex}
)
}}
{({ nextStep, prevStep, currentIndex, onChangeValue }) => (
Enter Your Username
onChange={e => onChangeValue("username", e.target.value)}
/>
)}
{" "}
// This step will not be rendered
{({ nextStep, prevStep, currentIndex }) => (
Step {currentIndex}
)}
{({ nextStep, prevStep, currentIndex, onSubmit }) => (
Baz {currentIndex}
)}
$3
`javascript
const steps = [1, 2, 3].map(index => (
{({ nextStep, prevStep, onSubmit }) => (
Step {index}
)}
))
return
`
$3
In this case, the array of Wizard.Step components is rendered before those specified as children of the Wizard component.
`javascript
const steps = [1, 2, 3].map(index => (
{({ nextStep, prevStep, onSubmit }) => (
Step {index}
)}
))
return (
{({ nextStep, prevStep, currentIndex, onSubmit }) => (
Baz {currentIndex}
)}
)
``
Contributing
Feel free to dive in! Open an issue or submit PRs.
React Wizard follows the Contributor Covenant Code of Conduct.
Contributors
Thanks goes to these wonderful people (emoji key):
|
pahosler
💡 🤔 |
Jody LeCompte
⚠️ 🤔 |
| :---: | :---: |
This project follows the all-contributors specification. Contributions of any kind welcome!