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: 3 months 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 (about 2 years ago)
- Default Branch: master
- Last Pushed: 2023-07-27T11:49:19.000Z (almost 2 years ago)
- Last Synced: 2024-05-01T12:39:43.592Z (about 1 year 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
```
### React 19
```bash
npm install react-form-wizard-component@next
```
or
```bash
yarn add react-form-wizard-component@next
```
## 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.