Optionally persist the step in the URL hash

[Stoyan Ekupov]

I am working on persisting each step in the URL hash. This will allow the browser back and forward buttons to follow the user navigation through the steps.
The implementation is similar to the one in https://github.com/jcmcneal/react-step-wizard with some improvements:

• <Wizard hashEnabled={true} /> turns on the functionality
• <Step hashKey="welcome" /> adds #welcome to the URL
• if the hashKey is omitted but hashEnabled={true} the hash key is generated as #stepN where N is stepIndex + 1. This way the first step with index 0 will have the hash #step1.
• on the first load of the wizard the first step always has a hash (this is missing in react-step-wizard)
• if the URL is changed to an existing hashKey, the wizard shows the the related step.

Are you interested in merging this functionality here?

[Jonas De Vrient]

Hi, thanks for taking the time to submit this suggestion. Here's my take:

I consider this to be out-of-scope for this module, here's why:

• This module only focuses on functionality, at the moment there is no such "step" component. So this would introduce a new component
• This behaviour can be implemented in user-land by plugging into the current handleStep API

Once again, thanks for your suggestion, but I'm not planning to include this functionality in this module

[Stoyan Ekupov]

Hi.
Thanks for answering and for your efforts building this package.
Some clarifications. I am not introducing a new Step component. The implementation just looks for hashKey prop on each of the direct children of the Wizard component.
Also, handleStep does not work for such use case as it is called only on nextStep() while it is necessary to be called on goToStep() also in order to properly set the URL hash.

[pepijn]

Needed the same any improvements on this?

[Stoyan Ekupov]

Needed the same any improvements on this?

@pepijndik Here is our copy of the repo with implementation of optional window.location.hash tracking: https://github.com/fourth/react-use-wizard
Use it like this:

<Wizard
      startIndex={0}
      hashEnabled={true}
    >
      <Step1 />
      <Step2 />
      <Step3 />
      ...
</Wizard>