Multi-step forms with React & TypeScript

Table of Contents

• Overview
• What's Changed
• The New API
• Example Component with TypeScript

Overview

In my first and latest post, I introduced my react-step-builder package for creating multi-step front-end interfaces with an example registration form.

Recently, I was working on adding TypeScript support to my project along with some changes to the API of the library. I would like to mention those changes in this post for those who are familiar with the previous version and would like to upgrade to the TypeScript version. If you've never heard of this library, you are encouraged to check out the docs on the GitHub Readme file.

Some of these changes were required to make it work with TypeScript, while some others were purely for clean-up purposes.

What's changed?

The New API

Example Component with TypeScript

While creating your step components, you may import the type definition StepComponentProps and use it for your component's props. It will give you all the available properties and methods that are available to you in the props object of the step component in your IDE's autocomplete feature.

import React from "react";
import { StepComponentProps } from "react-step-builder";

const Step1 = (props: StepComponentProps) => {
    return (
        <div>
            <input
                name="fname"
                value={props.getState("fname", "")}
                onChange={props.handleChange}
            />
            <input
                name="lname"
                value={props.getState("lname", "")}
                onChange={props.handleChange}
            />
        </div>
    );
};

export default Step1;