70 | )}
71 |
72 |
73 |
74 | )
75 | }
76 | }
77 |
78 | ```
79 |
80 | ## API
81 |
82 | `next` - goes to the next step if there is one
83 |
84 | `prev` - goes to the previous step if there is one
85 |
86 | `goTo` - allows you to jump to any step `0` being the root step
87 |
88 | `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
89 |
90 | `active` - the current active step, can be used again for animating
91 |
92 | `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.
93 |
94 |
95 |
96 | MIT License
97 |
--------------------------------------------------------------------------------
/package/README.md:
--------------------------------------------------------------------------------
1 | # strider
2 |
3 | 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.
4 |
5 | [](http://standardjs.com)
6 |
7 | ## Usage
8 |
9 | ```javascript
10 | import React from 'react'
11 | import { Strider, Step } from 'react-strider'
12 | import cx from 'classnames'
13 |
14 | import Layout from './Layout'
15 |
16 | import StepOne from './StepOne'
17 | import StepTwo from './StepTwo'
18 | import StepThree from './StepThree'
19 | import StepFour from './StepFour'
20 |
21 | class Quiz extends React.Component {
22 | constructor () {
23 | super()
24 | this.state = {
25 | products: []
26 | }
27 | }
28 | render () {
29 | return (
30 |
31 |
32 |
33 | {({ next, goTo, active, hiding, activeIndex }) => (
34 |