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'

root:{} 0 keys

root:{} 0 keys

{}

() => {
  const [getWizardStatus, wizardApi] = useMultipleForm()
  const [stateWizard, setStateWizard] = useState({})
  return (
    <div>
      <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>
      <button onClick={() => setStateWizard(getWizardStatus())}>
        Submit Wizard
      </button>
      <div>
        <code>{JSON.stringify(stateWizard)}</code>
      </div>
    </div>
  )
}

() => {
  const [getWizardStatus, wizardApi] = useMultipleForm()
  const [stateWizard, setStateWizard] = useState({})
  return (
    <div>
      <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>
      <button onClick={() => setStateWizard(getWizardStatus())}>
        Submit Wizard
      </button>
      <div>
        <code>{JSON.stringify(stateWizard)}</code>
      </div>
    </div>
  )
}

useMultipleForm

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Returns

Basic usage

Returns