https://github.com/mjangir/formik-wizard-form

Build multi step forms using Formik with ease.
https://github.com/mjangir/formik-wizard-form

form-wizard formik-form-wizard formik-multi-step-form formik-wizard stepper-form wizard-steps

Last synced: 3 months ago
JSON representation

Build multi step forms using Formik with ease.

• Host: GitHub
• URL: https://github.com/mjangir/formik-wizard-form
• Owner: mjangir
• License: mit
• Created: 2019-03-23T09:49:34.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-12-11T06:12:23.000Z (11 months ago)
• Last Synced: 2024-07-28T16:44:30.703Z (4 months ago)
• Topics: form-wizard, formik-form-wizard, formik-multi-step-form, formik-wizard, stepper-form, wizard-steps
• Language: TypeScript
• Homepage: http://formikwizard.manishjangir.com
• Size: 738 KB
• Stars: 74
• Watchers: 3
• Forks: 19
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        
# Formik Wizard Form

![npm type definitions](https://img.shields.io/npm/types/typescript)

![npm](https://img.shields.io/npm/v/formik-wizard-form)

[![compressed size](https://github.com/mjangir/formik-wizard-form/actions/workflows/size.yml/badge.svg)](https://github.com/mjangir/formik-wizard-form/actions/workflows/size.yml)

[![build](https://github.com/mjangir/formik-wizard-form/actions/workflows/test.yml/badge.svg)](https://github.com/mjangir/formik-wizard-form/actions/workflows/test.yml)

[![e2e tests](https://github.com/mjangir/formik-wizard-form/actions/workflows/integration.yml/badge.svg)](https://github.com/mjangir/formik-wizard-form/actions/workflows/integration.yml)

![GitHub](https://img.shields.io/github/license/mjangir/formik-wizard-form?label=license)

## Getting Started

Formik wizard form is a library which lets you build multistep form wizards in React with ease. It has been written over the famous form library formik and provides the enhanced versions of formik's `` and `useFormik` hook. Formik wizard form requires few additional props along with `` original props as well as adds some properties to the render props object.

Apart from that, the library is style or css framework agnostic and leaves the rendering part completely up to you. It just provides render props and you build your UI out of them.

For more information on usage, please refer to the How To Use and Examples section.

## How To Install

Install the package from npm or yarn registry.

### Install From Yarn

```bash

yarn add formik-wizard-form

```

### Install From NPM

```bash

npm install formik-wizard-form --save

```

## How To Use?

Formik wizard form exports two components `` and `useFormikWizard` similar to Formik's `` and `useFormik` hook and their original props have been left untouched. Rather they require you to provide few additional props to create a form wizard.

```javascript

import { FormikWizard, useFormikWizard } from 'formik-wizard-form';

```

## Visit [formikwizard.manishjangir.com](https://formikwizard.manishjangir.com) for docs and examples!

## Based On

[Formik](https://github.com/formium/formik)

## Maintainers

[Manish Jangir](https://github.com/mjangir)