React-wizardry is a data-driven smart wizard component for creating powerful forms with in built validations

Overview

Project logo

License npm bundle size (version) Snyk Version

react-wizardry is a data-driven smart wizard component for creating powerful forms with in built validations.


demo

Demo

Features

  • Data driven API
  • In built validations
  • 💪 Built with Typescript
  • 💡 Intuitive stepper interface
  • 🎨 Customizable Theme

Table of Contents

📦 Installation

Install the package via npm or yarn

npm install react-wizardry
yarn add react-wizardry

🚀 Getting Started

The component takes a pages collection and renders the pages in a stepper interface.The pages appear in the order they are passed in the pages collection.

The example shows a simple wizard with two pages.

<Wizard
  pages={[
    {
      title: "Introduction",
      fields: [
        {
          label: "Name",
          name: "name",
          type: "text",
          isRequired: true,
        },
      ],
  },
  {
    title: "Contact",
    fields: [
      {
        label: "Email",
        name: "email",
        type: "email",
        isRequired: true,
      },
    ],
 }
},

⚙️ Properties

Name Description Default
bodyHeight Sets the height of the form body 500
highlightFieldsOnValidation Highlights the fields when the validation fails or succeeds false
onFinish Callback executed on final step
pages Collection of Page object
RTL Enables right to left mode false
showStepperTitles Use this prop to display page titles under the stepper points false
silent Validation errors are flagged subtly. Validation messages are displayed only when the mouse is hovered over the field false
stepperItemWidth Sets the width of each stepper item "200px"
strict Validation rules are applied to all inputs that have been marked for validation or that are required.
The component prevents the user from moving on until the current step's errors have been fixed
false
theme Theme object for customized styling

Page

Page object is at the core of the wizard. Page object is used to define the title, description, fields, and validation rules for a page.

Name Description Type
fields Fields of the Page Array
finishMessage Custom message to be displayed on finish operation String
globalFormErrorMessage Global error message to be displayed on validation failures String
isActive Indicates whether the page is active or not Boolean
onChange Callback executed when any of the Form field value changes(Internal) Function
state State of the Page. can be NOT_VALIDATED, SUCCESS, FAIL, String
title Title of the Page String

Every page is in the NOT_VALIDATED state by default.

Here is an examples how to define pages in the wizard. We are defining two pages with two fields.

<Wizard
  pages={[
    {
      title: "Introduction",
      fields: [
        {
          label: "First Name",
          name: "firstName",
          type: "text",
          isRequired: true,
        },
        {
          label: "Last Name",
          name: "lastName",
          type: "text",
          isRequired: true,
        },
      ],
  },
  {
    title: "Contact",
    fields: [
      {
        label: "Email",
        name: "email",
        type: "email",
        isRequired: true,
      },
      {
        name: "Phone number",
        label: "Phone",
        type: "phone",
        isRequired: true,
      },
    ],
 }
},

Form field

Form field represents an input field in the wizard. Form field is used to define the label, type, validation rules, and other properties.

Name Description Type
isRequired Marks the field as required boolean
label Label for the field string
name Name of the Field string
selectOptions Use this prop when type is "select" Array
type Type of Field InputType
validate Enables validation for the field boolean
validationMessage Custom validation message to be shown on validation failure boolean

Fields marked as required are automatically validated. If you set isRequired to false and validate to true, the wizard will validate and flag the errors, but the step itself will not be marked as invalid.

In the example below we are defining two fields and making them required.

<Wizard
  pages={[
    {
      title: "Introduction",
      fields: [
        {
          label: "First Name",
          name: "firstName",
          type: "text",
          isRequired: true,
        },
        {
          label: "Last Name",
          name: "lastName",
          type: "text",
          validate: true,
        },
      ],
  },
]}

Here only the First Name field is required. The last name field will be validated if the user enters a value.

Form field types

Form field supports the following types:

  • text: Text input field
  • email: Email input field
  • phone: Phone input field
  • number: Number input field
  • password: Password input field
  • textarea: Textarea input field
  • select: Select input field
  • checkbox: Checkbox input field
  • radio: Radio input field
  • datetime: DateTime input field
  • file: File input field

All the above input types comes with inbuilt validation.

Accessing the wizard data

The onFinish callback receives the wizard data with each key representing a page.

For the getting started example, the onFinish callback will receive an object with the following structure:

", "lastName": "", }, "contact": { "email": ""; "phone": "", } }">
{
  "introduction": {
    "firstName": "",
    "lastName": "",
  },
  "contact": {
    "email": "";
    "phone": "",
  }
}

Custom validation messages

Validation messages are enabled by default for all fields. However, the validationMessage property allows you to customize the message for each field.

<Wizard
  pages={[
    {
      title: "Introduction",
      fields: [
        {
          label: "First Name",
          name: "firstName",
          type: "text",
          isRequired: true,
          validationMessage: "Please enter your first name",
        },
      ],
  },
]}

Custom icons

You can change the icons on the stepper head by giving the icons prop an array of icons as react components.

, , , , ]} />">
<Wizard
  ...
  icons={[
    <User key="usr" />,
    <Box key="box" />,
    <Twitter key="twitter" />,
    <Dollar key="dollar" />,
  ]}
/>

🎨 Theme

Customize the look and feel of the Wizard through the theme object.

Name Description Data Type Default
background Background color of the wizard string #f8f8f8
fail Colour to signify failed state string #de1738
formFieldBackground Background color of the Form field string #ffffff
formFieldBorder Border colour of the form field string #dcdcdc
inputBackground Background color of the native input control string #e8e8e8
inputTextColor Fore color of the text inside the native input control string #000000
primary Primary colour. This color will be the predominant color string #007fff
success Colour to signify a success state string #1db954
tabColor Colour of the tab string #f8f8f8
tabLineColor Colour of the line that runs through all the tabs string #ccc
textColor Colour of all texts string #000000

Here is a short example of how to use the theme object.

">
<Wizard
  theme={{
    primary: "#007fff",
    background: "#000",
    textColor: "#fff",
    formFieldBackground: "#282828",
    formFieldBorder: "#000",
    success: "#519259",
    fail: "#cf352e",
    inputBackground: "#464646",
    inputTextColor: "#fff",
    tabLineColor: "#464646",
    tabColor: "#7d7d7d",
  }}
/>

CodeSandbox examples

  1. Basic Wizard
  2. Complex Wizard
  3. Wizard with custom theme
  4. Custom Icons
  5. RTL
  6. Silent Mode
  7. Display stepper titles

⛏️ Built With

  • React - A JavaScript library for building user interfaces.
  • Typescript - TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
  • SCSS - A CSS preprocessor and compiler.
  • Webpack - Webpack is a module bundler that packs multiple modules into a single file.
  • Eslint - ESLint is a linter for JavaScript and JSX.
  • Prettier - Prettier is a tool to format code.

✍️ Authors

You might also like...
Handling forms in React Native using Formik and Yup.

##Handling forms in React Native using Formik and Yup. Usage # install dependencies yarn install # run bundler yarn run serve # run on Android devic

Zero-Configuration Reactive forms for Svelte
Zero-Configuration Reactive forms for Svelte

Formula + Beaker Δ→ Reactive Forms for Svelte Documentation Changelog svelte-formula is a Library for use with Svelte that super-charges your ability

Simply create a forms, without having to write state management logic on your own.
Simply create a forms, without having to write state management logic on your own.

Create React forms just with a pure JSX and let the react-standalone-form manage its state for you. A themeable form library based on Context API with a selection of user friendly inputs and wide customization abilities to match your design and functionality.

Paperfreeform - A Free Form Builder to save trees and create beautiful forms

PaperFreeForm PaperFreeForm is a Free Form Builder to save trees and create beau

Implementation Angular 13 Form Validation with Submit using Reactive Forms Module and Bootstrap 4.

Implementation Angular 13 Form Validation with Submit using Reactive Forms Module and Bootstrap 4. The form has: Full Name: required Username: require

In This project a meme generator app is built using react to learn various concepts of React.
In This project a meme generator app is built using react to learn various concepts of React.

Create React Meme Generator App In This project a meme generator app is built using react to Learn various concepts of React. Objectives States States

A simple sign in and sign up template built with React and Material UI
A simple sign in and sign up template built with React and Material UI

A simple sign in and sign up template built with React and Material UI. With complete input validation using formik and yup, making your life easy.

Simple and performant form library built with MobX
Simple and performant form library built with MobX

MobX Easy Form Simple and performant form library built with MobX. Works with React, React Native and any other framework that supports MobX. Motivati

A dynamic form component for react using JSON-Schema.

ATTENTION! THIS PROJECT IS NO LONGER ACTIVE. A maintained fork can be found at react-json-editor (h/t @ismaelga). plexus-form A dynamic form component

Comments
Releases(0.13.4)
Owner
Prabhu Murthy
Prabhu Murthy
FormPress: Open Source form builder which lets you safely collect data through custom forms

Open Source Form Builder With Safe Data Collection FormPress is an innovative, a

null 6 Nov 2, 2022
A React component for building Web forms from JSON Schema.

react-jsonschema-form A simple React component capable of using JSON Schema to declaratively build and customize web forms. Explore the docs » View Pl

null 12.1k Dec 5, 2022
A simple and easy way to control forms in React using the React Context API

A simple and easy way to control forms in React using the React Context API Getting Started Install With npm npm install --save formcat With yarn yar

Guilherme Louro 113 May 22, 2022
📋 React Hooks for forms validation (Web + React Native)

Performant, flexible and extensible forms with easy to use validation. English | 繁中 | 简中 | 日本語 | 한국어 | Français | Italiano | Português | Español | Рус

React Hook Form 32k Dec 1, 2022
Reactive forms for react and react native, using hooks and [email protected]

Reactive forms for react and react native, using hooks and [email protected] Installation: npm install -s react-fluid-form mobx mobx-react yup lodash // or: yarn

Misael dos Santos 5 Aug 2, 2022
React library for rendering forms.

Data Driven Forms is a React library used for rendering and managing forms with a lot of provided features based on React Final Form. ❓ Why to use Dat

Data driven forms 230 Nov 23, 2022
Build forms in React, without the tears 😭

Build forms in React, without the tears. Visit https://formik.org to get started with Formik. Organizations and projects using Formik List of organiza

Formium 31.6k Dec 1, 2022
A React library for building forms from any schema.

A set of React libraries for building forms from every schema.

Vazco 1.7k Dec 1, 2022
A bare minimal React form library for quick & simple forms.

React library using React Hooks to build forms & let you switch in & out Bootstrap 4 styling. React Bare Forms aka RBF aims to be the easiest to use f

Joe Gasewicz 17 Nov 22, 2022
Country / region React select boxes for your forms.

react-country-region-selector About Features Gotchas Demo Installation Usage List of component options Command-line Changelog Tests Thanks! License (s

country-regions 279 Nov 28, 2022