Ability to `useWizard` outside of `<Wizard>`

[Cory Simmons]

I'd like to be able to do something like

const {gotoStep} = useWizard() // or {nextStep} so I can nextStep(specificIndex) — this is misnamed and should be `gotoStep` but no worries

return (
  <div>
    <nav>
      <button onClick={() => gotoStep(1)}>Goto Step 1</button>
      <button onClick={() => gotoStep(2)}>Goto Step 1</button>
      <button onClick={() => gotoStep(3)}>Goto Step 1</button>
    </nav>
    
    <Wizard>
      <Step1 />
      <Step2 />
      <Step3 />
    </Wizard>
  </div>
)

But it throws.

Surprised this use case hasn't come up for literally every single person who yarn remove react-step-wizard && yarn add react-use-wizard

[Jonas De Vrient]

Hi! Thanks for your issue report. I'm afraid this won't be possible. <Wizard> implements React.Context in other words, you won't be able to call useWizard (aka useContext) at the same level of the <Wizard> (aka React.Context).

You can still make use of the header prop or use composition in every <Step> component to add your custom "header"

// or {nextStep} so I can nextStep(specificIndex) — this is misnamed and should be gotoStep but no worries

Totally agree on this one, it became confusing since the introduction of the specificIndex parameter in nextStep.

Surprised this use case hasn't come up for literally every single person who yarn remove react-step-wizard && yarn add react-use-wizard

Maybe because they use npm :)

[flyfishMT]

I wonder if introducing an optional "Steps" component could solve this use case, like react-router does with Routes?

const {gotoStep} = useWizard() // or {nextStep} so I can nextStep(specificIndex) — this is misnamed and should be `gotoStep` but no worries

return (
  <Wizard>
    <div>
      <nav>
        <button onClick={() => gotoStep(1)}>Goto Step 1</button>
        <button onClick={() => gotoStep(2)}>Goto Step 1</button>
        <button onClick={() => gotoStep(3)}>Goto Step 1</button>
      </nav>
    
      <Steps>
        <Step1 />
        <Step2 />
        <Step3 />
      </Steps>
    </div>
  </Wizard>
)

[Subtirelu Mihail]

@devrnt I think @flyfishMT is right, we will need an extra Steps component in order to use the goToStep, isLastStep and isFirstStep outside of the steps.
This could be useful if we need a static header or footer in which we handle the navigation

[flyfishMT]

@devrnt @subtirelumihail I would attempt a PR if you liked this idea