Wizard.LocationHooks#

const Component = () => {
  Wizard.useQueryLocator('unique-id')
  return (
    <Form.Handler>
      <Provider
        StepIndicator={{
          overviewTitle: 'Query parameters wizard steps',
        }}
      >
        <Wizard.Container id="unique-id">
          <MyStep title="Step 1" />
          <MyStep title="Step 2" />
          <MyStep title="Step 3" />
        </Wizard.Container>
      </Provider>
    </Form.Handler>
  )
}
const MyStep = ({ title }) => {
  return (
    <Wizard.Step
      aria-label={`Query parameters wizard: ${title}`}
      title={title}
    >
      <Form.Card>
        <P>Contents of {title}</P>
      </Form.Card>
      <Wizard.Buttons />
    </Wizard.Step>
  )
}
render(<Component />)

const Component = () => {
  Wizard.useReachRouter('wizard-with-router', {
    useLocation,
    navigate,
  })
  return (
    <Form.Handler>
      <Provider
        StepIndicator={{
          overviewTitle: 'Router wizard steps',
        }}
      >
        <Wizard.Container id="wizard-with-router">
          <MyStep title="Step 1" />
          <MyStep title="Step 2" />
          <MyStep title="Step 3" />
        </Wizard.Container>
      </Provider>
    </Form.Handler>
  )
}
const MyStep = ({ title }) => {
  return (
    <Wizard.Step aria-label={`Router wizard: ${title}`} title={title}>
      <Form.Card>
        <P>Contents of {title}</P>
      </Form.Card>
      <Wizard.Buttons />
    </Wizard.Step>
  )
}
render(<Component />)