react-progressive-form

Progressive Forms

FormWizard

• Cycle through a list of components. Much like a carousel, but without all the complication and overhead.

Props

Name	Type	Description
steps	array	Array of components to be cycled through

The FormWizard takes a list of components and cycles through them sequentially. Each component is passed two props that are used to move forward and backward (onNext and onBack).

const SomeComponent = ({ onNext, onBack }) => (
  <div>
    <h1 onClick={onNext}>Next</h1>
    <h1 onClick={onBack}>Back</h1>
  </div>
);

const WizArd = () => {
  return <FormWizard steps={[SomeComponent]} />;
};

Likely the callbacks would be called inside of a form submit handler. But you do you.

Progressive Form

• Take a list of fields, turn it into a multi-step form

Props

Name	Type	Description
stepCount	int	The number of steps in the form
fields	array	List of field names, types, etc.
onSubmit	function	A callback to handle submission of the form
formName	string	Name and ID of the single progressive form

The ProgressiveForm takes a list of fields and displays them as a series of stepCount steps. The fields prop should contain a list of field definitions including:

Field	Description
name	HTML input name
type	HTML input type
palceholder	HTML input placeholder
stepIndex	The step on which this field should be displayed

const fields = [
  { name: 'fieldOne', type: 'text', placeholder: 'field 1', stepIndex: 0 },
  { name: 'fieldTwo', type: 'number', placeholder: 'field 2', stepIndex: 0 },
  { name: 'fieldThree', placeholder: 'field 3', stepIndex: 0 },
  { name: 'fieldFour', placeholder: 'field 4', stepIndex: 1 },
];

const Progression = ({ onSubmit }) => {
  return <ProgressiveForm stepCount={2} fields={fields} onSubmit={onSubmit} />;
};