Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/koustov/react-form-planner
react-form-planner is react based form-builder/viewer. It makes life very easy in order deal with forms.
https://github.com/koustov/react-form-planner
form form-builder forms react reactjs
Last synced: 3 months ago
JSON representation
react-form-planner is react based form-builder/viewer. It makes life very easy in order deal with forms.
- Host: GitHub
- URL: https://github.com/koustov/react-form-planner
- Owner: koustov
- Created: 2021-06-05T12:43:10.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-09-14T10:11:47.000Z (4 months ago)
- Last Synced: 2024-10-03T17:33:41.972Z (4 months ago)
- Topics: form, form-builder, forms, react, reactjs
- Language: JavaScript
- Homepage: react-form-planner.vercel.app
- Size: 8.42 MB
- Stars: 5
- Watchers: 2
- Forks: 2
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.MD
- Code of conduct: CODE_OF_CONDUCT.md.md
Awesome Lists containing this project
README
rfp-react-form-builder
Formally knows as react-form-planner
Build or view, your beautiful form is just a click away.
No technical knowledge is required.
NO BACKEND,Entirely based on frontend.
---
   
This is a **fully customizable** form builder based on [`React`](https://facebook.github.io/react/)
**Table of Contents**
- [Screenshots](#screenshots)
- [Demo](#demo)
- [Playground](#playground)
- [Features](#features)
- [When do you need it](#when-do-you-need-it)
- [Usage](#usage)
- [Install 🐙](#install-)
- [Highlight 🔥](#highlight-)
- [Form Builder](#form-builder)
- [How to use](#how-to-use)
- [Supported Elements](#supported-elements)
- [Form Properties](#form-properties)
- [Form Parameters](#form-parameters)
- [Preview your form](#preview-your-form)
- [Form Viewer](#form-viewer)
- [How to use](#how-to-use-1)
- [Items in queue](#items-in-queue)
- [Contribution 🍰](#contribution-)
- [License](#license)
## Screenshots
| | |
| ---------------------------------------- | -------------------------------------------- |
|  |  |
|  |  |
## Demo
Visit https://rfp-react-form-planner.vercel.app/
## Playground
[Codesandbox Project](https://codesandbox.io/s/react-form-builder-rfp-react-form-builder-smw51)
## Features
- JSON based.
- Redux based.
- Fully Responsive
- Customizable
- Quick and easy.
- Styled component based.
- Theme supported
- Full validation support
- Custom theme
## When do you need it
- You have complex form to be created?
- Forms are dynamic in nature?
- You don't want to manage the form?
- You need a structured/organised form rendering?
- You are providing forms as service
## Usage
- Simple Form
- Dynamic Form
- Quiz
- Exams
- Tutorial
- Sky is the only limit
### Install 🐙
```bash
npm install rfp-react-form-builder react-icons react-player styled-components @mui/material
```
or
```bash
yarn add rfp-react-form-builder react-icons react-player styled-components @mui/material
```
## Highlight 🔥
This project contains an advanced Form Builder and a Form Viewer.
### Form Builder
- Capable of creating form of any type.
- Styled component theme support
- Endlesss Customization
- Add your own style
- Add your own properties
### How to use
Import FormPlanner component
```jsx
import { FormPlanner } from 'react-form-viewer'
```
Just drop it to desired place
```jsx
{
console.log('onControlValueChanged')
}}
onFormValueChanged={() => {
console.log('onFormValueChanged')
}}
theme={dark}
/>
```
### Supported Elements
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 |
| | PDF | pdf | 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 |
### Form Properties
Allows to add/update form meta information like
- Title
- Description
- Header background image
- Header background color
- Background image
- Background color
### Form Parameters
| 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
Preview your form while editing
### Form Viewer
This is a full fledged form viewer.
- Capable of rendering complex form layout.
- Multi line and multi row
- Theme support
### How to use
Import FormPlanner component
```jsx
import { FormPlanner } from 'react-form-viewer'
```
Just drop it to desired place
```jsx
{
console.log('Value received')
}}
template={}
/>
```
## Items in queue
- Localization
## Contribution 🍰
Feel free to create issue and make pull request
Refer [code of conduct ](./CODE_OF_CONDUCT.md)
Refer [contributing ](./CONTRIBUTING.md)
## License
MIT © [Koustov](https://github.com/koustov)