Skip to main content

Module: @robo-wizard/react-router

Type aliases

WizardProviderProps

Ƭ WizardProviderProps<Values>: PropsWithChildren<{ initialValues?: Values }>

Type parameters

NameType
Valuesextends object

Defined in

react-router/src/context/index.tsx:9

Functions

Step

Step(props): Element

Parameters

NameTypeDescription
propsRouteProps & StepConfig<object>accept same props as the Route component from react-router, excepte for path, as well as StepConfig from robo-wizard

Returns

Element

Defined in

react-router/src/components/Step.tsx:7


Wizard

Wizard<Values>(props): Element

example Set up the Wizard under a BrowserRouter

function App() {
return (
<BrowserRouter>
<Wizard<Values> initialValues={{ firstName: '', lastName: '' }}>
<Step name="first" element={<First />} />
<Step name="second" element={<Second />} />
<Step name="third" element={<Third />} />
</Wizard>
</BrowserRouter>
)
}

example An example step component

const First = () => {
const wizard = useWizardContext<Values>();

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

return (
<>
<p>{wizard.currentStep} step</p>
<form onSubmit={onSubmit}>
<div>
<label htmlFor="firstName" id="firstName-label">
First Name:
</label>
<input
type="text"
name="firstName"
id="firstName"
aria-labelledby="firstName-label"
defaultValue={wizard.currentValues.firstName}
autoFocus={true}
/>
</div>
<div>
<button type="button" onClick={() => wizard.goToPreviousStep()} role="link">Previous</button>
<button type="submit">Next</button>
</div>
</form>
</>
)
}

Type parameters

NameTypeDescription
Valuesextends object = objectOptional object to describe values being gathered by the wizard

Parameters

NameTypeDescription
propsWizardProviderProps<Values>Create a routed wizard experience under a Router from react-router

Returns

Element

Defined in

react-router/src/context/index.tsx:78


useWizardContext

useWizardContext<Values>(): RoboWizard<Values>

Type parameters

NameTypeDescription
Valuesextends object = objectobject describing the currentValues gathered by RoboWizard Access the RoboWizard from the Wizard Context Provider

Returns

RoboWizard<Values>

Defined in

react-router/src/context/index.tsx:121