useMultipleForm
useMultipleForm(callback: Function)
provides the logic to handle the implementation of wizards.
const [getWizardStatus, wizardApi] = useMultipleForm(callback);
Returns
(helpers
): array
-
An array that holds:
getWizardStatus
: a function that returns the actual state of the wizard.wizardApi
: an object which holds the props that must be spread in each form.
Basic usage
import { Form, Input, useMultipleForm } from 'usetheform';
import { useState } from 'react';
Preview
Live Editor
function WizardForm() { const [getWizardStatus, wizardApi] = useMultipleForm(); const [stateWizard, setStateWizard] = useState({}) return ( <div className="FormCustom"> <Form {...wizardApi} name="form1" initialState={{ name: "foo" }}> <Input type="text" name="name" /> </Form> <Form {...wizardApi} name="form2" initialState={{ lastname: "mouse" }}> <Input type="text" name="lastname" /> </Form> <div className="space-x-4 mt-4"> <button onClick={() => setStateWizard(getWizardStatus())}>Submit Wizard</button> <code>{JSON.stringify(stateWizard)}</code> </div> </div> ) }