Skip to content
Home

useStep

Info
Demos

Import

import { Wizard } from '@dnb/eufemia/extensions/forms'
// Use Wizard.useStep

Description

Wizard.useStep is a React Hook that returns Wizard.Context parameters such as totalSteps, activeIndex or the setActiveIndex handler.

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


function Step1() {
  const { totalSteps, activeIndex, setActiveIndex } = Wizard.useStep()


  return <Wizard.Step>...</Wizard.Step>
}


function MyForm() {
  return (
    <Form.Handler>
      <Wizard.Container>
        <Step1 />
      </Wizard.Container>
    </Form.Handler>
  )
}

You can also connect the hook with the Wizard.Container via an id (string, function, object or React Context as the reference). This lets you render the hook outside of the context:

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


const myContainerId = 'unique-id' // or a function, object or React Context reference


function Sidecar() {
  const { activeIndex, setActiveIndex } = Wizard.useStep(myContainerId)
}


function MyForm() {
  return (
    <Form.Handler>
      <Sidecar />
      <Wizard.Container id={myContainerId}>...</Wizard.Container>
    </Form.Handler>
  )
}

EditButton

In order to navigate to a new step when using setActiveIndex you can use the Wizard.EditButton component.

Listen to step change

You can also use the onStepChange event to listen to a step change.

function MyStep() {
  // Ensure to use "useCallback" or keep the function outside of the component to avoid memory leaks
  const onStepChange = React.useCallback(
    (index, mode, { preventNavigation }) => {
      // Do something with the step change
    },
    [],
  )


  Wizard.useStep(undefined, { onStepChange })


  return <Wizard.Step>...</Wizard.Step>
}