React Step Builder allows you to combine states of multiple components in one place and navigate between step components without losing the state from other step components.

It only provides wrapper components and methods to be able to render your step components without being forced to use certain UI features in your step structure.

Using npm:

$ npm install --save react-step-builder 

<Steps> <Step title="My First Step" component={Step1} /> <Step title="My Second Step" component={Step2} /> <Step title="My Third Step" component={Step3} /> </Steps>

number

The current step's order number

function()

Moves to the next step if it exists.

function()

Moves to the previous step if it exists.

function(<order>)

Jumps to the step with the provided step order if it exists.

object

Contains all the state pieces combined from your Step components. The user data that was entered accross the steps accumulate under this value.

function(<key>)

Returns the state value for the provided key. If the key does not exist, returns empty string.

function(<key, value>)

Manipulates your state directly. You must provide key and value to be stored in your state.
NOTE: If your data is coming from a synthetic React event (via onChange), use props.handleChange instead.

function(<event>)

You may pass this function to onChange events in your form elements. Your form element must have a name property, which eventually becomes its key in the state object. If your form element has name="username", then it is stored in state as {props.state.username}.

object <StepNode>

This object provides information about current step and methods to move between steps. Available properties and methods:

• props.step.order - Order number of the props.step.
• props.step.title - Title of the step (you provided when creating <Step /> component)
• props.step.nextStep - Order number of the next step, null if it's not available
• props.step.prevStep - Order number of the previous step, null if it's not available

• props.step.isFirst() - Returns true if it's the first step, otherwise false
• props.step.isLast() - Returns true if it's the last step, otherwise false
• props.step.hasNext() - Returns true if there is a next step available, otherwise false
• props.step.hasPrev() - Returns true if there is a previous step available, otherwise false