-
Notifications
You must be signed in to change notification settings - Fork 126
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support for typescript #31
Comments
Hi, If still relevant you can use the following type declaration in your code. I have it under 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 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>
)
}
} |
@dmk99 maybe you can just create a pull request for that? |
Would love official TS support! |
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
Anyone know a solution for this? How can the child components be properly typed with these functions? |
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>
)
} |
Hi, thank you for your work. Can you provide types for typescript?
The text was updated successfully, but these errors were encountered: