@comparaonline/ui-wizard-step-manager

@comparaonline/ui-wizard-form-manager

This component is a navigation form manager. It allows you to track the steps for a conversational-like form and render the fields that are already configured.

Installation

yarn add @comparaonline/ui-wizard-form-manager

Usage

This component receives a children function that will inyect the right props to work with WizardFormStepper and WizardForm.

Example

const render = () => (
  <WizardFormManager<FormValues>
    onSubmit={onSubmit}
    steps={steps}
    initialValues={{}}
  >
    {({ onSubmit, initialValues, ...props }) => (
      <>
        <WizardFormStepper
          activeStepId={props.currentStep.id}
          stepGroups={{}}
        />
        <WizardForm
          {...props}
          formProps={{
            onSubmit: onSubmit,
            initialValues: initialValues
          }}
        />
      </>
    )}
  </WizardFormManager>
);