react-progressive-form v0.0.1

Progressive Forms

FormWizard

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

Props

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

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:

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