Introduction

Multistep-form is an open-source lib written in React created by
@Loft's software engineering team to facilitate the development of a
multi-step form. It abstracts all the logic necessary for the form to
work: next, previous and skip to step n, in addition to facilitating
the calculation of progress.

Installation

To have access to multistep-form, simply install using npm:

``console
npm i --save @loft/multistep-form
`

or yarn:

`console
yarn add @loft/multistep-form
`

Usage

To make use of the facilities that the multistep-form provides, simply
use the MultiStep component passing the steps configuration and your
children will receive all the intelligence through the props:

`jsx
import { MultiStep } from '@loft/multistep-form';


{Children}
;
`

or

`jsx
import { MultiStep } from '@loft/multistep-form';


{(props) => {
/ Content /
}}
;
`

When using this component, a React context will be created that you can
access using the useMultiStepContext hook:

`jsx
import { useMultiStepContext } from '@loft/multistep-form';

const MyComponent = () => {
const context = useMultiStepContext();

return blah;
};
`

Properties accepted by the MultiStep component

$3

The steps property is a list of configuration objects, it's the initial
information regarding the steps of the form, here's an example:

`javascript
const steps = [
{
id: 'first-step',
Component: () =>

I am a dummy component

,
},
{
id: 'second-step',
Component: () =>

I am another dummy component

,
},
{
id: 'jumped-step',
Component: () =>

I am a jumped step

,
},
{
id: 'third-step',
Component: () =>

I am third dummy component

,
},
];
`

As we can see in the example above, each step is composed of an id and
a component may it be functional or not.

$3

The stepId property is the identifier of the first step that will be
displayed when rendering, it's optional and if it's not provided, the identifier
of the first step of the configuration list is assumed, here is an example:

`javascript
const stepId = 'second-step';
`

Properties injected by MultiStep into the children

$3

The step property injected by the MultiStep component is the current
step the user is in, it's the following signature:

`jsx
// Container component
const Container = ({ step: { id, Component, nextStepId }, next }) => {
return (




You're in step with id {id}


{nextStepId && Next}

);
};

// Using provider
const MyForm = () => {
return {Container};
};
`

$3

The progress property injected by the MultiStep component is the
progress of the steps completed by the user.

`jsx
// Container component
const Container = ({
progress: { first, current, last },
step: { Component },
}) => {
return (




You're in step {current}
of the form that starts at {first}
and ends at {last}


);
};

// Using provider
const MyForm = () => {
return {Container};
};
`

Methods injected by MultiStep into the children

$3

The next method is responsible for transitioning the step, it's linear,
that is, the user will go to the next step provided in the configuration.

`jsx
// Container component
const Container = ({ step: { Component }, next }) => {
return (


Next

);
};

// Using provider
const MyForm = () => {
return {Container};
};
`

$3

The previous method is useful for returning to the previous step.

`jsx
// Container component
const Container = ({ step: { Component }, previous }) => {
return (


Previous}

);
};

// Using provider
const MyForm = () => {
return {Container};
};
`

$3

The jumpTo method allows you to jump directly to a step, which can
be before or after the current step.

`jsx
// Container component
const Container = ({ step: { Component }, jumpTo }) => {
return (


jumpTo('third-step')}>Jump!

);
};

// Using provider
const MyForm = () => {
return {Container};
};
``

Examples

TBD