\r\n\r\n[](/LICENSE)\r\n\r\n[](https://snyk.io/test/github/prabhuignoto/react-wizardry)\r\n[](/Version)\r\n\r\n\r\n\r\n\r\n> react-wizardry is a data-driven smart wizard component for creating powerful forms with in built validations.\r\n\r\n---\r\n\r\n\r\n\r\n[Demo](https://codesandbox.io/s/react-wizardy-multi-forms-io9ey5)\r\n\r\n
Features
\r\n\r\n- ⚡Data driven API\r\n- ✅In built validations\r\n- 💪Built with Typescript\r\n- 💡Intuitive stepper interface\r\n- 🎨Customizable Theme\r\n\r\n
Table of Contents
\r\n\r\n- [📦 Installation](#-installation)\r\n- [🚀 Getting Started](#-getting-started)\r\n- [⚙️ Properties](#️-properties)\r\n- [Page](#page)\r\n- [Form field](#form-field)\r\n- [Form field types](#form-field-types)\r\n- [Accessing the wizard data](#accessing-the-wizard-data)\r\n- [Custom validation messages](#custom-validation-messages)\r\n- [Custom icons](#custom-icons)\r\n- [🎨 Theme](#-theme)\r\n- [CodeSandbox examples](#codesandbox-examples)\r\n- [⛏️ Built With](#️-built-with)\r\n- [✍️ Authors](#️-authors)\r\n\r\n## 📦 Installation\r\n\r\nInstall the package via `npm` or `yarn`\r\n\r\n```sh\r\nnpm install react-wizardry\r\n```\r\n\r\n```sh\r\nyarn add react-wizardry\r\n```\r\n\r\n## 🚀 Getting Started\r\n\r\nThe 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.\r\n\r\nThe example shows a simple wizard with two pages.\r\n\r\n```jsx\r\nThe component prevents the user from moving on until the current step's errors have been fixed | false |\r\n| `theme` | [Theme](#🎨-theme) object for customized styling | |\r\n\r\n## Page\r\n\r\nPage object is at the core of the wizard. Page object is used to define the title, description, fields, and validation rules for a page.\r\n\r\n| Name | Description | Type |\r\n| :--------------------- | :------------------------------------------------------------------- | :------- |\r\n| fields | Fields of the Page | Array |\r\n| finishMessage | Custom message to be displayed on finish operation | String |\r\n| globalFormErrorMessage | Global error message to be displayed on validation failures | String |\r\n| isActive | Indicates whether the page is active or not | Boolean |\r\n| onChange | Callback executed when any of the Form field value changes(Internal) | Function |\r\n| state | State of the Page. can be `NOT_VALIDATED`, `SUCCESS`, `FAIL`, | String |\r\n| title | Title of the Page | String |\r\n\r\n> Every page is in the `NOT_VALIDATED` state by default.\r\n\r\nHere is an examples how to define pages in the wizard. We are defining two pages with two fields.\r\n\r\n```jsx\r\n 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.\r\n\r\nIn the example below we are defining two fields and making them required.\r\n\r\n```jsx\r\n\",\r\n \"lastName\": \"\",\r\n },\r\n \"contact\": {\r\n \"email\": \"\";\r\n \"phone\": \"\",\r\n }\r\n}\r\n```\r\n\r\n## Custom validation messages\r\n\r\nValidation messages are enabled by default for all fields. However, the `validationMessage` property allows you to customize the message for each field.\r\n\r\n```jsx\r\n,\r\n ,\r\n ,\r\n ,\r\n ]}\r\n/>\r\n```\r\n\r\n## 🎨 Theme\r\n\r\nCustomize the look and feel of the Wizard through the `theme` object.\r\n\r\n\r\n| Name | Description | Data Type | Default |\r\n| :------------------ | :------------------------------------------------------- | :-------- | :------ |\r\n| background | Background color of the wizard | string | #f8f8f8 |\r\n| fail | Colour to signify failed state | string | #de1738 |\r\n| formFieldBackground | Background color of the Form field | string | #ffffff |\r\n| formFieldBorder | Border colour of the form field | string | #dcdcdc |\r\n| inputBackground | Background color of the native input control | string | #e8e8e8 |\r\n| inputTextColor | Fore color of the text inside the native input control | string | #000000 |\r\n| primary | Primary colour. This color will be the predominant color | string | #007fff |\r\n| success | Colour to signify a success state | string | #1db954 |\r\n| tabColor | Colour of the tab | string | #f8f8f8 |\r\n| tabLineColor | Colour of the line that runs through all the tabs | string | #ccc |\r\n| textColor | Colour of all texts | string | #000000 |\r\n\r\nHere is a short example of how to use the theme object.\r\n\r\n```jsx\r\n\r\n```\r\n\r\n## CodeSandbox examples\r\n\r\n 1. [Basic Wizard](https://codesandbox.io/s/react-wizardy-simple-form-vu3y6b)\r\n 2. [Complex Wizard](https://codesandbox.io/s/react-wizardy-multi-forms-io9ey5)\r\n 3. [Wizard with custom theme](https://codesandbox.io/s/react-wizardy-theme-hzf5bx)\r\n 4. [Custom Icons](https://codesandbox.io/s/react-wizardy-custom-icons-d2rkin?file=/src/App.js)\r\n 5. [RTL](https://codesandbox.io/s/react-wizardy-rtl-misojt)\r\n 6. [Silent Mode](https://codesandbox.io/s/react-wizardy-silent-m4m3j8?file=/src/App.js)\r\n 7. [Display stepper titles](https://codesandbox.io/s/react-wizardy-stepper-title-2yhqx7?file=/src/App.js)\r\n\r\n## ⛏️ Built With\r\n\r\n- [React](http://reactjs.org) - A JavaScript library for building user interfaces.\r\n- [Typescript](https://www.typescriptlang.org) - TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.\r\n- [SCSS](https://sass-lang.com) - A CSS preprocessor and compiler.\r\n- [Webpack](https://webpack.js.org) - Webpack is a module bundler that packs multiple modules into a single file.\r\n- [Eslint](https://eslint.org) - ESLint is a linter for JavaScript and JSX.\r\n- [Prettier](https://prettier.io) - Prettier is a tool to format code.\r\n\r\n## ✍️ Authors\r\n\r\n- [@prabhuignoto](https://github.com/prabhuignoto) - Idea & Initial work\r\n","readmeFilename":"README.md","homepage":"https://github.com/prabhuignoto/react-wizardry#readme","repository":{"type":"git","url":"git+https://github.com/prabhuignoto/react-wizardry.git"},"bugs":{"url":"https://github.com/prabhuignoto/react-wizardry/issues"}}
![\"Project](\"./logo.svg\"){kind=logo}
\r\n