1.0.3 • Published 3 years ago
@mtdev/react-wizard v1.0.3
React Hooks Wizard
A UI-free React Wizard package. Stop overriding css/components and build your own Wizard!
Demo
Click here for the latest demo.
Quick start
Install
@mtdev/react-wizard
:npm install @mtdev/react-wizard yarn add @mtdev/react-wizard
Create your wizard!
import { Wizard, useWizardStep, useWizardStep } from "@mtdev/react-wizard"; const Step = () => { const { isActive, stepIndex } = useWizardStep(); return isActive ? <div>Step {stepIndex + 1}</div> : null; }; const Header = () => { const { activeStep, stepsCount } = useWizard(); return ( <h1> Step {activeStep + 1} of {stepsCount} </h1> ); }; const Footer = () => { const { nextStep, previousStep } = useWizard(); return ( <> <button onClick={previousStep}>Previous step</button> <button onClick={nextStep}>Next step</button> </> ); }; export default MyWizard = () => ( <Wizard> <Header /> <Wizard.Steps> <Step /> <Step /> <Step /> <Step /> <Step /> </Wizard.Steps> <Footer /> </Wizard> );
Documentation
Wizard
A Wizard
component must have one Wizard.Steps
child which contains the actual steps.
It is used to count the number of steps and to wrap each step with a WizardStepProvider
.
initialStepIndex
: the index of the initial steponChange
: a function called every time the current step changes
useWizard
It's a hook that can be used either inside a step or to create a header or a footer.
stepsCount
: the total number or stepsactiveStep
: the index of the current active stepmaxActivatedStepIndex
: the index of the maximum activated stepmoveToStep(stepIndex)
: a function used to jump to a specific stepresetToStep(stepIndex)
: a function used to jump to a specific step and resetmaxActivatedStepIndex
to that stepnextStep()
: a function to go to the next steppreviousStep()
: a function to go to the previous step
useWizardStep
It's a hook that can be used inside a step. It returns the same properties and functions of useWizard
plus a some additional properties:
isActive
: a boolean indicating if the step is activehasBeenActive
: a boolean indicating if the step has been activestepIndex
: the step index
1.0.3
3 years ago
0.0.0-canary-20201131142513
3 years ago
0.0.0-canary-2020113114508
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago