React Step Builder

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.5v.2.0.xReason
props.currentN/ANo 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.stepN/AEverything under props.step is moved directly under props object. For example: props.step.order is now props.order
props.step.nextStepN/ANo real use case.
props.step.prevStepN/ANo real use case.

The New API

PropertyTypeDescription
props.ordernumberOrder number of the current step component
props.titlestringTitle of the current step component
props.progressnumberProgress of the current step, value between 0 and 1
props.nextfunctionFunction to move to the next step
props.prevfunctionFunction to move to the previous step
props.jumpfunction<step>Function to jump to the given step
props.isFirstfunctionFunction to check if the step is the first
props.isLastfunctionFunction to check if the step is the last
props.hasPrevfunctionFunction to check if the step has any previous step
props.hasNextfunctionFunction to check if the step has any next step
props.allStepsArray<{order, title}>Array of all available steps’ title and order number
props.stateobjectCombined state value of all steps
props.setStatefunction<key, value>Function to set/update state by key
props.getStatefunction<key, defaultValue>Function to retrieve a state value by key
props.handleChangefunction<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;

Leave a Reply

Your email address will not be published. Required fields are marked *