Skip to main content

Module: @robo-wizard/react

Functions

useWizard

useWizard<Values>(steps, initialValues?, actions?): RoboWizard<Values>

example Basic usage


const App: React.FC = () => {
const wizard = useWizard<Values>(['first', 'second', 'third']);

const onSubmit: React.FormEventHandler<HTMLFormElement> = event => {
event.preventDefault();
const values = Object.fromEntries(new FormData(event.currentTarget))
wizard.goToNextStep({ values });
};

return (
<div>
<p>{wizard.currentStep} step</p>
<form onSubmit={onSubmit}>
{wizard.currentStep === 'first' && (
<div>
<label
htmlFor="firstName"
id="firstName-label"
>
First Name:
</label>
<input
type="text"
name="firstName"
id="firstName"
aria-label="firstName-label"
defaultValue={wizard.currentValues.firstName}
/>
</div>
)}

{wizard.currentStep === 'second' && (
<div>
<label
htmlFor="lastName"
id="lastName-label"
>
Last Name:
</label>
<input
type="text"
name="lastName"
id="lastName"
aria-label="lastName-label"
defaultValue={wizard.currentValues.lastName}
/>
</div>
)}

{wizard.currentStep === 'third' && (
<div>
<p>
Welcome {wizard.currentValues.firstName}{' '}
{wizard.currentValues.lastName}!
</p>
</div>
)}

<div>
<button
type="button"
role="link"
onClick={() => wizard.goToPreviousStep()}
>
Previous
</button>
<button type="submit">
Next
</button>
</div>
</form>
</div>
);
};

Type parameters

NameTypeDescription
Valuesextends object = objectGeneric type for object of values being gathered through the wizard steps

Parameters

NameTypeDescription
stepsFlowStep<Values>[]Configuration of steps for the wizard, see FlowStep
initialValuesValuesOptional object with intial values to use when starting the wizard
actionsundefined | { navigate?: ActionFunction<object, WizardEvent<object>> }Optional object with navigate field with a function to be called when entering a step

Returns

RoboWizard<Values>

Defined in

react/src/hooks/use-wizard.ts:89