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} />;
};