Module: @robo-wizard/react-router

Type aliases

WizardProviderProps

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

Type parameters

Name	Type
Values	extends object

Defined in

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

Functions

Step

▸ Step(props): Element

Parameters

Name	Type	Description
props	PathRouteProps & StepConfig<object> & LayoutRouteProps & StepConfig<object> & IndexRouteProps & 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

Name	Type	Description
Values	extends object = object	Optional object to describe values being gathered by the wizard

Parameters

Name	Type	Description
props	WizardProviderProps<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

Name	Type	Description
Values	extends object = object	object 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