https://github.com/prabhuignoto/react-wizardry
🪄 Multi step forms with in built validations
https://github.com/prabhuignoto/react-wizardry
forms multistep-react-form react-forms react-wizard wizard wizard-steps
Last synced: 11 months ago
JSON representation
🪄 Multi step forms with in built validations
- Host: GitHub
- URL: https://github.com/prabhuignoto/react-wizardry
- Owner: prabhuignoto
- License: mit
- Created: 2022-04-20T18:51:51.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-10-31T18:46:20.000Z (over 3 years ago)
- Last Synced: 2025-03-01T07:23:25.717Z (12 months ago)
- Topics: forms, multistep-react-form, react-forms, react-wizard, wizard, wizard-steps
- Language: TypeScript
- Homepage:
- Size: 3.04 MB
- Stars: 40
- Watchers: 4
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[](/LICENSE)
[](https://snyk.io/test/github/prabhuignoto/react-wizardry)
[](/Version)
> react-wizardry is a data-driven smart wizard component for creating powerful forms with in built validations.
---
[Demo](https://codesandbox.io/s/react-wizardy-multi-forms-io9ey5)
Features
- ⚡Data driven API
- ✅In built validations
- 💪Built with Typescript
- 💡Intuitive stepper interface
- 🎨Customizable Theme
Table of Contents
- [📦 Installation](#-installation)
- [🚀 Getting Started](#-getting-started)
- [⚙️ Properties](#️-properties)
- [Page](#page)
- [Form field](#form-field)
- [Form field types](#form-field-types)
- [Accessing the wizard data](#accessing-the-wizard-data)
- [Custom validation messages](#custom-validation-messages)
- [Custom icons](#custom-icons)
- [🎨 Theme](#-theme)
- [CodeSandbox examples](#codesandbox-examples)
- [⛏️ Built With](#️-built-with)
- [✍️ Authors](#️-authors)
## 📦 Installation
Install the package via `npm` or `yarn`
```sh
npm install react-wizardry
```
```sh
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.
```jsx
The component prevents the user from moving on until the current step's errors have been fixed | false |
| `theme` | [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.
```jsx
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.
```jsx
",
"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.
```jsx
,
,
,
,
]}
/>
```
## 🎨 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.
```jsx
```
## CodeSandbox examples
1. [Basic Wizard](https://codesandbox.io/s/react-wizardy-simple-form-vu3y6b)
2. [Complex Wizard](https://codesandbox.io/s/react-wizardy-multi-forms-io9ey5)
3. [Wizard with custom theme](https://codesandbox.io/s/react-wizardy-theme-hzf5bx)
4. [Custom Icons](https://codesandbox.io/s/react-wizardy-custom-icons-d2rkin?file=/src/App.js)
5. [RTL](https://codesandbox.io/s/react-wizardy-rtl-misojt)
6. [Silent Mode](https://codesandbox.io/s/react-wizardy-silent-m4m3j8?file=/src/App.js)
7. [Display stepper titles](https://codesandbox.io/s/react-wizardy-stepper-title-2yhqx7?file=/src/App.js)
## ⛏️ Built With
- [React](http://reactjs.org) - A JavaScript library for building user interfaces.
- [Typescript](https://www.typescriptlang.org) - TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
- [SCSS](https://sass-lang.com) - A CSS preprocessor and compiler.
- [Webpack](https://webpack.js.org) - Webpack is a module bundler that packs multiple modules into a single file.
- [Eslint](https://eslint.org) - ESLint is a linter for JavaScript and JSX.
- [Prettier](https://prettier.io) - Prettier is a tool to format code.
## ✍️ Authors
- [@prabhuignoto](https://github.com/prabhuignoto) - Idea & Initial work