Multi-step form with React & Typescript

This is an example of a multi-step form implemented with React and Typescript

• You can find a online demo here

Usage

Currently only the following input-controls are available:

• text
• email
• radio
• submit

import { FormMultiStep, FormMultiStepSchema } from './components';

// Each step currently supports one field, you can create any amount of steps 
// you want. The last step should be a `type: submit` in order to show the 
// summary and confirmation when the user reached the end of the form. 

// Please take a look at the `Interfaces` and `Type` files for further 
// documentation on available fields and options.

const formMultiStepSchema: FormMultiStepSchema = {
	1: {
		type: 'text',
		id: 'unique-id-of-the-name-control',
		name: 'name',
		label: 'Your full name',
	},
	2: {
		type: 'email',
		id: 'unique-id-of-the-email-control',
		name: 'email',
		label: 'Your email address',
	},
	3: {
		type: 'radio',
		id: 'unique-id-of-the-radio-select-control',
		name: 'salary',
		label: 'Your salary',
		defaultChecked: false,
		value: '€1.000 - €2.000',
		values: [
			'€0 - €1.000',
			'€1.000 - €2.000',
			'€2.000 - €3.000',
			'€3.000 - €4.000',
			'More than €4.000',
		],
	},
	4: {
		type: 'submit',
		id: 'unique-id-of-the-submit-control',
		name: 'submit',
		label: 'Is this data correct?',
		value: 'Confirm your details',
	},
};

// If you wish to provide default data to the form:
const formMultiStepDefaultData = {
	name: 'Bob Walters',
	email: '[email protected]',
	salary: 'More than €4.000',
};

// Initializing a multi-step form with formData
<FormMultiStep
	id="any-id-you-want"
	formSchema={formMultiStepSchema}
	formData={formMultiStepDefaultData}
	onChange={formData => this.handleFormChange(formData.form)}
/>

🚀 Getting started

After you have cloned the repository to your computer please run the following commands inside the project folder:

# install dependencies
yarn

# run the app (localhost:8080)
yarn start

🚧 Test

To make sure the application works as expected you can run the test suite like this:

# runs all test files
yarn test

# with coverage report
yarn test --coverage

# watch
yarn test --watch

# run tests that match a spec-name (e.g `App` or `components/Form`)
yarn test name-of-spec

# update snapshots that are out of date
yarn test --updateSnapshot

A full list of jest cli commands can be found here

🌈 Prettier

Prettier is a code formatter that ensures that all outputted code conforms to a consistent style

Run the following command before each commit to make sure your changes are valid 🤓

Formats all Ts/Tsx, Js/Jsx and Scss files according to .prettierrc presets

# format all files
yarn format

🚦 Linter

Code linting can be seen, in a more broad sense, as static code analysis.

What's the difference between Lint and Prettier?

Lints all Ts/Tsx, Js/Jsx and Scss files according to tslint.json presets

# lint all files
yarn lint

Note: Before running yarn lint, please run yarn format first 😉

🏭 Build

If you wish to host this app, you will need to run the build command. After you've run the command, you will find the build artefacts in the /dist folder.

# build static files
yarn build

🚚 Deploy to Github Pages

If you wish, you can deploy this app to Github Pages. To do so please configure the following settings before you run yarn deploy

Info: This guide refers to hosting an example with a custom-domain

1. Set output paths in .env (start by renaming env.example to .env, wondering why?)
   • production: PATH_PRODUCTION=https://your-domain.com/your-repository-name
   • development: PATH_DEVELOPMENT=/
2. Inside package.json
   • you will need to modify homepage with your custom domain / github pages url
     • e.g.: https://your-domain.com/your-repository-name
   • Inside package.json you will need to modify build with your custom domain / github pages
     • e.g.: www.your-domain.com

Finally now you're ready to:

# deploy app to production
yarn deploy