Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fatmali/react-formik-wizard
A simple opinionated library for creating wizards with React and Formik using JSON
https://github.com/fatmali/react-formik-wizard
creating-wizards formik json react typescript wizards
Last synced: 20 days ago
JSON representation
A simple opinionated library for creating wizards with React and Formik using JSON
- Host: GitHub
- URL: https://github.com/fatmali/react-formik-wizard
- Owner: fatmali
- License: mit
- Created: 2020-12-24T17:00:43.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-09-08T01:38:45.000Z (about 1 year ago)
- Last Synced: 2023-09-08T03:15:11.917Z (about 1 year ago)
- Topics: creating-wizards, formik, json, react, typescript, wizards
- Language: TypeScript
- Homepage: https://fatmali.github.io/react-formik-wizard
- Size: 5.15 MB
- Stars: 8
- Watchers: 2
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Formik Wizard
> A simple opinionated library for creating dynamic forms (aka wizards) with React using JSON
[](https://www.npmjs.com/package/react-formik-wizard) [](https://standardjs.com)
## Intro
Building forms is hectic. Building wizards, even more so! I built this library to enable me to create quick wizards and forms using plain json. Having a form defined in a structure like JSON has a lot of advantages, to name a few:
1. Lose coupling between your React components and your forms, you can have your forms stored as json anywhere in your architecture and deployed independently of your frontend code 🚀
2. Easy to build tools that would help in form creation and maintenace by non-technical team members, saves your engineers time ⏰
## Install
```bash
npm install --save react-formik-wizard
```
## Usage
```tsx
import React from 'react'
import Wizard from 'react-formik-wizard'
const App = () => {
// JSON representing form, this can be stored in your code or in your server and fetched at runtime.
const form = {
name: 'My Wizard',
settings: {
disableNextUntilValid: true,
disableSubmitUntilValid: true,
useSections: true
},
steps: [
{
name: 'Personal Info',
id: 'personal_info',
sections: [
{
name: 'Biodata',
fields: [
{
label: 'First Name',
id: 'first_name',
type: 'text',
required: true
},
{
label: 'Last Name',
id: 'last_name',
type: 'text',
required: true
},
{
label: 'Date of Birth',
id: 'dob',
type: 'date',
required: true
}
]
}
]
},
{
name: 'Medical',
id: 'medical',
sections: [
{
name: 'Current conditions',
fields: [
{
label: 'If yes, list all conditions you have',
id: 'all_conditions',
type: 'combobox',
options: [
{ value: '1', label: 'Diabetes' },
{ value: '2', label: 'HBP' }
],
required: true
}
]
}
]
}
],
validation: []
}
const onComplete = (values: any) => {
console.log(values)
}
return
}
export default App
```
### Defining Custom Components
It's possible to define custom UI to render fields instead of the default components rendered. For example:
```tsx
const CustomDateInput = ({ form, field }: any) => {
return (
form.setFieldValue(field.name, e)} />
)
}
const App = () => {
const wizard = {
name: 'JSON Wizard',
settings: {
disableNextUntilValid: true,
disableSubmitUntilValid: true,
useSections: true
},
steps: [
{
name: 'Medical',
id: 'medical',
sections: [
{
name: 'Personal Information',
fields: [
{
label: 'Do you have any current conditions?',
id: 'current_conditions_available',
type: 'custom-date',
},
]
}
]
}
],
}
return (
)
```
## Conditional Rendering
It's useful in dynamic forms/wizards to render fields depending on the values of other fields. In order to render fields conditionally, you can define it like this in the schema:
```tsx
const wizard = {
name: 'JSON Wizard',
settings: {
disableNextUntilValid: true,
disableSubmitUntilValid: true,
useSections: true
},
steps: [
{
name: 'Medical',
id: 'medical',
sections: [
{
name: 'Personal Information',
fields: [
fields: [
{
label: 'Do you have any current conditions?',
id: 'current_conditions',
type: 'select',
options: [
{ value: 'yes', label: 'Yes' },
{ value: 'no', label: 'No' }
],
required: true
},
{
label: 'If yes, list all conditions you have',
id: 'all_conditions',
type: 'select',
options: [
{ value: '1', label: 'Diabetes' },
{ value: '2', label: 'HBP' }
],
required: true,
show: {
when: 'current_conditions',
is: 'yes'
}
},
]
}
]
}
],
}
```
Conditional rendering is determined by the `show` property. The `show` property is an object that
1. Expects a `when` which is the id of the field whose value is depended upon.
2. It also expect any of the following params:
- `is`: which checks if the field === `when` ,
- `gt`: checks if `when` > `is`,
- `gte`: checks if `when` >= `is`,
- `lt`: checks if `when` <= `lt`,
- `lte`: checks if `when` <= `lte`,
- `contains`: checks if `when` contains `contains`
## License
MIT © [fatmali](https://github.com/fatmali)