@comparaonline/ui-wizard-form

@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.

Example

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

<WizardForm
  formProps={{ onSubmit }}
  currentStep={{ id: '1' }}
  next={navigationFunction}
  previous={navigationFunction}
  isLastStep={booleanFunction}
  isFirstStep={booleanFunction}
  isLoading={false}
/>

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>