Step header and content components with which to make a multi step form
Usage:
import{Step,Steps,StepHeader}from'fl-react-steps'// Check client/style.scss for variables you can overrideimport'fl-react-steps/client/style.scss'exportdefaultclassSteppedFormextendsReact.Component{constructor(){super()this.state={step: 1}}handleChangeStep=step=>{this.setState({step})}render(){const{step}=this.statereturn(<div><StepHeaderheadings={['First page','Second page']}step={step}onChangeStep={this.handleChangeStep}/><Stepsstep={step}><Step><form>{/* the first page of your form */}</form></Step><Step><form>{/* the second page of your form, and so on */}</form></Step></Steps></div>)}}
StepHeader props:
step: The currenly active step
headings: A list of titles for your steps
onChangeStep: Called when a step is clicked
className: Classes to give the step header wrapper node. Defaults to 'step-header clearfix'
stepClassName: Extra classes to give the individual header nodes
stepClass: Alias of stepClassName