strider
A stepper library, for use in any type of flow, onboarding, quiz. With some helpers for animating between steps but without getting too in the way.
Usage
Component { super thisstate = products: } { return <Layout> <Strider activeIndex=0 transitionSpeed=400> <Step> <div className=> <StepOne next=next /> </div> </Step> <Step> <div className=> <StepTwo next=next step=activeIndex prev=prev handleProduct= this /> </div> </Step> <Step> <div className=> <StepThree next=next step=activeIndex prev=prev /> </div> </Step> <Step> <div className=> <StepFour next=next step=activeIndex prev=prev /> </div> </Step> </Strider> </Layout> }
API
next
- goes to the next step if there is one
prev
- goes to the previous step if there is one
goTo
- allows you to jump to any step 0
being the root step
hiding
- a simple set timeout for applying animations between steps, you could also apply set timeouts on the next/prev call to add additional animations within your own components
active
- the current active step, can be used again for animating
activeIndex
- the current index, helpful if you want to have some ui for visualizing where you are in the flow, or numbered steps like step 3 of 7 for example.
MIT License