@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
-
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. -
next
,previous
,isLastStep
,isFirstStep
: These functions allows to the component to correctly render navigation buttons and loading messages. -
currentStep
: the step to render. -
stepId
: A possible value to try to move that step, intended to be used in conjunction withrouter
. -
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>;