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?

v1.1.5	v.2.0.x	Reason
props.current	N/A	No real use case.
props.getState(key)	props.getState(key, defaultValue)	Before initiating a state value value, getState returns the default value you pass. This change was required for the default types of input.value and input.checked HTML attributes. For text inputs or textareas, pass an empty string. For checkbox values, pass a boolean value.
props.step	N/A	Everything under props.step is moved directly under props object. For example: props.step.order is now props.order
props.step.nextStep	N/A	No real use case.
props.step.prevStep	N/A	No real use case.

The New API

Property	Type	Description
props.order	number	Order number of the current step component
props.title	string	Title of the current step component
props.progress	number	Progress of the current step, value between 0 and 1
props.next	function	Function to move to the next step
props.prev	function	Function to move to the previous step
props.jump	function<step>	Function to jump to the given step
props.isFirst	function	Function to check if the step is the first
props.isLast	function	Function to check if the step is the last
props.hasPrev	function	Function to check if the step has any previous step
props.hasNext	function	Function to check if the step has any next step
props.allSteps	Array<{order, title}>	Array of all available steps’ title and order number
props.state	object	Combined state value of all steps
props.setState	function<key, value>	Function to set/update state by key
props.getState	function<key, defaultValue>	Function to retrieve a state value by key
props.handleChange	function<event>	onChange event handler for form elements

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;