@comparaonline/ui-wizard-form-next

@comparaonline/ui-wizard-form

This is the Form component that contains every input. It uses the react-final-form(RFF) Form component to handle value's state.

Installation

yarn add @comparaonline/ui-wizard-form

Usage

WizardForm

This component receives some mandatory props in order to initialize the react-final-form(RFF) Form component

1. formProps: These props are passed directly to the RFF's Form component, so if you need to pass something directly to the component, this is the way.

2. next, previous, isLastStep, isFirstStep: These functions allows to the component to correctly render navigation buttons and loading messages.

3. currentStep: the step to render.

4. stepId: A possible value to try to move that step, intended to be used in conjunction with router.

5. router: a method that can be used to modify the routes, if passed must implement the required interface

Example

import { WizardForm } from '@comparaonline/ui-wizard-form';

<WizardForm
  formProps={{ onSubmit }}
  currentStep={{ id: '1' }}
  next={navigationFunction}
  previous={navigationFunction}
  isLastStep={booleanFunction}
  isFirstStep={booleanFunction}
  isLoading={false}
  stepId="2"
  router={
    push: (stepId: string) => void,
    replace: (stepId: string) => void
  }
/>

WizardFormLayout Components

Use them as containers of different WizardForm content.

import { WizardFormLayout } from '@comparaonline/ui-wizard-form';

<WizardFormLayout.Actions>
  <Button>Continue</Button>
  <Button>Skip</Button>
</WizardFormLayout.Actions>;