Instance Prop Documentation

[muttenzer]

Hi Jason,

Thank you very much for this fantastic project. I want to control my wizard from outside the StepWizard component, and I'm not quite sure how to achieve it using the instance prop. Is there any advanced example of it, that I could look into?

Thank you very much, Timo

[bundit]

@highdox This is how I got it to work with mine:

function Wizard({ children }) {
    const [wizard, setWizard] = useState<StepWizardProps>()

    return (
        <ReactStepWizard instance={setWizard} className="h-full w-full">
            {children}
        </ReactStepWizard>
    )
}

[muttenzer]

@bundit That works like a charm, thanks!

[bundit]

Closing this issue

[sajjadjm]

Hi @bundit How are you doing? You told that use StepWizardProps type for the state, but when in call for example wizard.nextStep() it shows an type error that says wizard does not have any method with this name. It actually works, but i cannot build my application. How can i fix this?? Thank you

[abdelav]

@sajjadjm possible workaround is to merge both types and use them

import StepWizard, { StepWizardProps, StepWizardChildProps } from 'react-step-wizard';

type SWProps = StepWizardProps & StepWizardChildProps;

......

 const [ wizard, setWizard ] = useState<SWProps>();

 const setInstance = (sw: StepWizardProps): void => {
    const swProps = sw as SWProps;
    setWizard(swProps);
 };

 ....

 <Button onClick={wizard?.nextStep}>NEXT<Button>