React Form Wizard Component

A react form wizard component with validation and progress bar with no external dependencies which simplifies tab wizard management.

📚Document ・ 🔎 Demos ・ 🔬 Playground . 📝 Blog

Installation

To install the package, you can use npm or yarn:

1npm install react-form-wizard-component

or

1yarn add react-form-wizard-component

Usage

Import the FormWizard component and use it in your React application:

1import FormWizard from "react-form-wizard-component";
2import "react-form-wizard-component/dist/style.css";
3
4function App() {
5  const handleComplete = () => {
6    console.log("Form completed!");
7    // Handle form completion logic here
8  };
9  const tabChanged = ({
10    prevIndex,
11    nextIndex,
12  }: {
13    prevIndex: number;
14    nextIndex: number;
15  }) => {
16    console.log("prevIndex", prevIndex);
17    console.log("nextIndex", nextIndex);
18  };
19
20  return (
21    <>
22      <FormWizard
23        shape="circle"
24        color="#e74c3c"
25        onComplete={handleComplete}
26        onTabChange={tabChanged}
27      >
28        <FormWizard.TabContent title="Personal details" icon="ti-user">
29          {/* Add your form inputs and components for the frst step */}
30          <h1>First Tab</h1>
31          <p>Some content for the first tab</p>
32        </FormWizard.TabContent>
33        <FormWizard.TabContent title="Additional Info" icon="ti-settings">
34          <h1>Second Tab</h1>
35          <p>Some content for the second tab</p>
36        </FormWizard.TabContent>
37        <FormWizard.TabContent title="Last step" icon="ti-check">
38          <h1>Last Tab</h1>
39          <p>Some content for the last tab</p>
40        </FormWizard.TabContent>
41      </FormWizard>
42      {/* add style */}
43      <style>{`
44        @import url("https://cdn.jsdelivr.net/gh/lykmapipo/themify-icons@0.1.2/css/themify-icons.css");
45      `}</style>
46    </>
47  );
48}
49
50export default App;

Examples

You can find examples of using the react-form-wizard-component in the examples directory.

License

This package is licensed under the MIT License. See the LICENSE file for more information.

Please note that this is a basic README.md template, and you may need to modify it further to match your specific package and requirements.