https://github.com/parsajiravand/react-form-wizard

A react form wizard component with validation and progress bar with no external dependencies which simplifies tab wizard management.
https://github.com/parsajiravand/react-form-wizard

form form-wizard next react reactjs

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/parsajiravand/react-form-wizard
• Owner: parsajiravand
• License: mit
• Created: 2023-06-26T00:12:21.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-07-27T11:49:19.000Z (over 1 year ago)
• Last Synced: 2024-05-01T12:39:43.592Z (9 months ago)
• Topics: form, form-wizard, next, react, reactjs
• Language: TypeScript
• Homepage: https://react-form-wizard-component-document.netlify.app/
• Size: 111 KB
• Stars: 14
• Watchers: 1
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGES.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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:

```bash

npm install react-form-wizard-component

```

or

```bash

yarn add react-form-wizard-component

```

## Usage

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

```tsx

import FormWizard from "react-form-wizard-component";

import "react-form-wizard-component/dist/style.css";

function App() {

  const handleComplete = () => {

    console.log("Form completed!");

    // Handle form completion logic here

  };

  const tabChanged = ({

    prevIndex,

    nextIndex,

  }: {

    prevIndex: number;

    nextIndex: number;

  }) => {

    console.log("prevIndex", prevIndex);

    console.log("nextIndex", nextIndex);

  };

  return (

    <>

      

        

          {/* Add your form inputs and components for the frst step */}

          
First Tab

          
Some content for the first tab

        

        

          
Second Tab

          
Some content for the second tab

        

        

          
Last Tab

          
Some content for the last tab

        

      

      {/* add style */}

      {`

        @import url("https://cdn.jsdelivr.net/gh/lykmapipo/[email protected]/css/themify-icons.css");

      `}

    >

  );

}


export default App;

```

## Examples

You can find examples of using the `react-form-wizard-component` in the [examples](https://react-form-wizard-component-document.netlify.app/docs/category/demos) directory.

## License

This package is licensed under the MIT License. See the [LICENSE](./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.