onStepChange callback on Wizard Api

[b93rn]

Hello Author! We like to have an onStepChange(activeStepIndex: number) => void callback on the Wizard component. At the moment it's really hard to communicate wizard state to other components outside the wizard Context.

To clarify, at the moment i have this specific problem:

<Container>
  <CustomWizardSteps activeStep={activeStepIndex}/>
  <Wizard onStepChange={setActiveStepIndex}>
      <Step1 />
      <Step2 />
      <Step3 />
  </Wizard>
</Container>

If you think it's a good idea and you're busy i can attempt a PR.

[Jonas De Vrient]

Hi, you can keep track of the state within the component where you use <Wizard>. You can pass this as a prop to the step components (or use a context as you wish). Then within the step component attach your callback to handleStep.

Also setting the active step index is a responsibility of the <Wizard> so you shouldn't overwrite this functionality.

Hope this clears things out :)

[b93rn]

Thanks for your response! I'm not sure if you understand my problem correctly. The CustomWizardSteps component does not set any step, it just shows all the wizard steps and the current active step. I can't place the CustomWizardSteps component inside the Wizard component (Context) since the Wizard component will see it as a wizard step. Therefore, i want to pass the active step state outside of the Wizard component. The normal React way would be to use a callback function from a parent component to set the active step state in the parent component. The only way to do this at the moment is to call the callback on every step component inside the Wizard component, which in my opinion is not a nice solution. I rather have a single callback function on the Wizard component. Maybe i'm missing something, but i hope this will clear things out.

[Greg Donovan]

Hi @devrnt,
Thank you for your library. My question is how to persist state beetween steps. For example, I want to capture a name in the first step and when returning to the first step I want to see what was originally entered. I don't see a way to do this currently so I started to add a setStepState method in the Wizard and add this to the context. This would then update a state value in the wizard. Do you have an example of this?

[Michiel De Mey]

Our current use case also requires the need for communicating the progress externally outside of the <Wizard> component.

Currently, we have the wizard set up as follows:

<Panel header={<Progress percentage={progressPercentage} />}>
  <Wizard>
    <Step1 />
    <Step2 />
  </Wizard>
</Panel>

Now, the progress needs to be reported to the parent component (in this case <Panel>) where it will show a simple progress bar with the percentage of completion.

---

Adding an onStepChange or onProgress callback to the Wizard component as suggested does make sense in our case.

Any thoughts on this?

[Jonas De Vrient]

Seems like there is enough demand for this new feature. PRs would be welcome, otherwise, I'll take a look when I've some more time.

@MichielDeMey It seems like your use case could be simplified by using the wrapper prop (since v2.2.0). You can move your <Pannel> to the wrapper component where you can use useWizard (and calculate your percentage).

[pyrexfm]

Here's a PR on this: #180

[Sean Newby]

Do you think you'll be able to merge in the PR? The functionality is exactly what I need. Either way, thank you for all the work on this.

[Jonas De Vrient]

v2.3.0