Module: @robo-wizard/react

Type aliases

WizardProviderProps

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

Type parameters

Name	Type
Values	extends Record<string, unknown>

Defined in

react/src/contexts/index.tsx:41

Variables

WizardContext

• Const WizardContext: Context<null | RoboWizard<object>>

internal

Defined in

react/src/contexts/index.tsx:39

Functions

Step

▸ Step(_props): React.ReactElement | null

Parameters

Name	Type
_props	StepConfig<object> & { element: ReactNode }

Returns

React.ReactElement | null

Defined in

react/src/contexts/index.tsx:8

---

Wizard

▸ Wizard<Values>(props): Element

example Set up the Wizard with Step components

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

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 Record<string, unknown>	Optional object to describe values being gathered by the wizard

Parameters

Name	Type	Description
props	WizardProviderProps<Values>	Create a wizard experience

Returns

Element

Defined in

react/src/contexts/index.tsx:104

---

createStepsFromChildren

▸ createStepsFromChildren(steps): StepConfig & { element: ReactNode }[]

Parameters

Name	Type	Description
steps	ReactNode	= The Children opaque object passed to components, only Step components will be processed

Returns

StepConfig & { element: ReactNode }[]

Defined in

react/src/contexts/index.tsx:15

---

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

Name	Type	Description
Values	extends object = object	Generic type for object of values being gathered through the wizard steps

Parameters

Name	Type	Description
steps	FlowStep<Values>[]	Configuration of steps for the wizard, see FlowStep
initialValues	Values	Optional object with intial values to use when starting the wizard
actions	undefined | { 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

---

useWizardContext

▸ useWizardContext<Values>(): RoboWizard<Values>

Type parameters

Name	Type	Description
Values	extends object	object describing the currentValues gathered by RoboWizard Access the RoboWizard from the Wizard Context Provider

Returns

RoboWizard<Values>

Defined in

react/src/contexts/index.tsx:121