react-form-planner is react based form-builder/viewer. It makes life very easy in order deal with forms.
This is a fully customizable form builder based on React
Table of Contents
Visit https://rfp-react-form-planner.vercel.app/
npm install rfp-react-form-builder react-icons react-player styled-components @mui/material
or
yarn add rfp-react-form-builder react-icons react-player styled-components @mui/material
This project contains an advanced Form Builder and a Form Viewer.
Import FormPlanner component
import { FormPlanner } from 'react-form-viewer'
Just drop it to desired place
<FormPlanner
onControlValueChanged={() => {
console.log('onControlValueChanged')
}}
onFormValueChanged={() => {
console.log('onFormValueChanged')
}}
theme={dark}
/>
FormPlanner comes with tons of prebuilt elements which are already grouped for convenience. Few of them are visible by default. Rest can be turned on when required
Group | Element | Internal Name | Availability |
---|---|---|---|
Basic | Header | header | Default |
Medium Header | mediumheader | Default | |
Small Header | smallheader | Default | |
Label | label | Default | |
Form Control | Text Box | text | On Demand |
Number Box | number | On Demand | |
Multiline Box | multiline | On Demand | |
Date Picker | date | On Demand | |
Date Time Picker | datetime | On Demand | |
Checkbox | checkbox | On Demand | |
Radio | radio | On Demand | |
Select | select | On Demand | |
Color Picker | color | On Demand | |
Media | Image | image | On Demand |
Video | video | On Demand | |
On Demand | |||
Quiz | Question | question | On Demand |
Advanced | Grid | grid | On Demand |
Rich Text | richtext | On Demand | |
Multi Values | multivalue | On Demand | |
Uploads | Image Upload | imageupload | On Demand |
Multiple Image Upload | imagesupload | On Demand | |
Miscellaneous | Divider | divider | On Demand |
Allows to add/update form meta information like
Name | Description | Default Value |
---|---|---|
showFormProperties | Show form properties button to update form level values | false |
showPreview | Integrated button to show form preview | false |
allowCustomStyles | Allow user to set custom css styles | false |
allowCustomProps | Allow user to set custom field properties | false |
advancedFeatures | Enable advanced features | false |
fields | List of control types to be shown | All |
Preview your form while editing
This is a full fledged form viewer.
Import FormPlanner component
import { FormPlanner } from 'react-form-viewer'
Just drop it to desired place
<FormViewer
onChange={(a, b, c) => {
console.log('Value received')
}}
template={<template_data>}
/>
Feel free to create issue and make pull request
Refer code of conduct
Refer contributing
MIT © Koustov