Support for typescript

[BenevidesLecontes]

Hi, thank you for your work. Can you provide types for typescript?

[dmk99]

Hi,

If still relevant you can use the following type declaration in your code. I have it under src/@types/react-step-wizard.

declare module 'react-step-wizard' {
    import * as React from "react";

    interface StepWizardProps {
        className: string;

        hashKey: string;
        initialStep: number;
        instance: (wizard: StepWizardProps) => void;
        isHashEnabled: boolean;
        isLazyMount: boolean;
        nav: JSX.Element;

        onStepChange: ({
                            previousStep: number,
                            activeStep: number
                        }) => void;

        transitions: {
            enterRight?: string,
            enterLeft?: string,
            exitRight?: string,
            exitLeft?: string
        }
    }

    export interface StepWizardChildProps {
        isActive: boolean;
        currentStep: number;
        totalSteps: number;
        firstStep: () => void;
        lastStep: () => void;
        nextStep: () => void;
        previousStep: () => void;
        goToStep: (step: number) => void;
    }

    export default class StepWizard extends React.PureComponent<Partial<StepWizardProps>>{};
}

Then in an example. Define the wizard:

<StepWizard>
      <Step1/>
      <div>Another Step</div>
</StepWizard>

And the Step1 component would look something like:

import {StepWizardChildProps} from "react-step-wizard";
import * as React from "react";

export default class Step1 extends React.PureComponent<Partial<StepWizardChildProps>> {
    render() {
        return (
            <div>
                {this.props.currentStep} / {this.props.totalSteps}
            </div>
        )
    }
}

[JGrzybowski]

@dmk99 maybe you can just create a pull request for that?

[spencerpauly]

Would love official TS support!

[LukasDeco]

Also really voting for official TS support!

Additionally, with the provided solution, it looks like there is some issues when you try to call one of the child prop functions. Since wrapping the child props in Partial means they might be undefined, you have to call functions like this:

if(goToStep) {
    goToStep(1)
}

Anyone know a solution for this? How can the child components be properly typed with these functions?

[RadekGluchowski]

Function component example:

import { StepWizardChildProps } from "react-step-wizard";
import * as React from "react";

export const StepOne: React.FC<Partial<StepWizardChildProps>> = ({ ...props }) => {
    return (
        <div>
            <h2>Step {props.currentStep}</h2>
            <p><button onClick={props.nextStep}>Next Step</button></p>
        </div>
    )
}

Or u can destructure props

import { StepWizardChildProps } from "react-step-wizard";
import * as React from "react";

export const StepOne: React.FC<Partial<StepWizardChildProps>> = ({ currentStep, nextStep }) => {
    return (
        <div>
            <h2>Step {currentStep}</h2>
            <p><button onClick={nextStep}>Next Step</button></p>
        </div>
    )
}