Wizard.LocationHooks#

Description#

In order to store the current step in the browser location:

Relevant links#

https://www.dnb.no/path/?unique-id-step=1

You may use one of the listed React Hooks to easily integrate your application router.

The id parameter is used to identify the Wizard.Container component. But it is not required when used inside a Wizard.Container.

Supported routers#

If you use a router, you may connect one of the supported hooks to it. This way your application will not import unnecessary and unused code.

If you do not use a router, you can make use of the useQueryLocator hook.

With `react-router`#

import { Form, Wizard } from '@dnb/eufemia/extensions/forms'
import { useSearchParams } from 'react-router'

function MyForm() {
  Wizard.useReactRouter('unique-id', { useSearchParams })

  return (
    <Form.Handler>
      <Wizard.Container id="unique-id">...</Wizard.Container>
    </Form.Handler>
  )
}

With `@reach/router`#

import { Form, Wizard } from '@dnb/eufemia/extensions/forms'
import { navigate, useLocation } from '@reach/router'

function MyForm() {
  Wizard.useReachRouter('unique-id', { useLocation, navigate })

  return (
    <Form.Handler>
      <Wizard.Container id="unique-id">...</Wizard.Container>
    </Form.Handler>
  )
}

With `next/navigation`#

import { Form, Wizard } from '@dnb/eufemia/extensions/forms'
import { useRouter, usePathname, useSearchParams } from 'next/navigation'

function MyForm() {
  Wizard.useNextRouter('unique-id', {
    useRouter,
    usePathname,
    useSearchParams,
  })

  return (
    <Form.Handler>
      <Wizard.Container id="unique-id">...</Wizard.Container>
    </Form.Handler>
  )
}

SSR support#

Each hook has a getIndex function to get the current step index. You can unitize it to set the initial step index.

import { Form, Wizard } from '@dnb/eufemia/extensions/forms'
import { useRouter, usePathname, useSearchParams } from 'next/navigation'

function MyForm() {
  const { getIndex } = Wizard.useNextRouter('unique-id', {
    useRouter,
    usePathname,
    useSearchParams,
  })

  return (
    <Form.Handler>
      <Wizard.Container initialActiveIndex={getIndex()} id="unique-id">
        ...
      </Wizard.Container>
    </Form.Handler>
  )
}

Without a router#

You connect the hook with the Wizard.Container component via a unique id (string, function, object or React Context as the reference). The id will be used in the URL query string: url?unique-id-step=1.

import { Form, Wizard } from '@dnb/eufemia/extensions/forms'

function MyForm() {
  Wizard.useQueryLocator('unique-id')

  return (
    <Form.Handler>
      <Wizard.Container id="unique-id">...</Wizard.Container>
    </Form.Handler>
  )
}

Demos#

const Component = () => {
  Wizard.useQueryLocator('unique-id')
  return (
    <Form.Handler>
      <Wizard.Container id="unique-id">
        <MyStep title="Step 1" />
        <MyStep title="Step 2" />
        <MyStep title="Step 3" />
      </Wizard.Container>
    </Form.Handler>
  )
}
const MyStep = ({ title }) => {
  return (
    <Wizard.Step title={title}>
      <Form.Card>
        <P>Contents of {title}</P>
      </Form.Card>
      <Wizard.Buttons />
    </Wizard.Step>
  )
}
render(<Component />)

Reach router#

const Component = () => {
  Wizard.useReachRouter('wizard-with-router', {
    useLocation,
    navigate,
  })
  return (
    <Form.Handler>
      <Wizard.Container id="wizard-with-router">
        <MyStep title="Step 1" />
        <MyStep title="Step 2" />
        <MyStep title="Step 3" />
      </Wizard.Container>
    </Form.Handler>
  )
}
const MyStep = ({ title }) => {
  return (
    <Wizard.Step title={title}>
      <Form.Card>
        <P>Contents of {title}</P>
      </Form.Card>
      <Wizard.Buttons />
    </Wizard.Step>
  )
}
render(<Component />)

Suggest an edit