# k-react-form-builder

> A form builder/planner for react. Formally known as react-form-planner

Latest version **1.1.3** (published 2022-04-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install k-react-form-builder
pnpm add k-react-form-builder
yarn add k-react-form-builder
bun add k-react-form-builder
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2022-04-08 |
| First published | 2022-04-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 21 |
| Unpacked size | 6.9 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 7 |
| Author | Koustov |
| Maintainers | koustovm |
| Keywords | redux-form, form-viewer, react-form-viewer, form-builder, react-form-builder, react form builder, react form builder, form-viewer, react, react-redux, json-to-form |

## Links

- npm: https://www.npmjs.com/package/k-react-form-builder
- Repository: https://github.com/koustov/react-form-planner
- Homepage: https://react-form-planner.vercel.app/
- Issues: https://github.com/koustov/react-form-planner/issues
- npm.io page: https://npm.io/package/k-react-form-builder

## Dependencies (21)

- [uuid](https://npm.io/package/uuid.md) ^8.3.2
- [redux](https://npm.io/package/redux.md) ^4.1.2
- [react-is](https://npm.io/package/react-is.md) ^17.0.2
- [node-sass](https://npm.io/package/node-sass.md) ^7.0.1
- [@babel/cli](https://npm.io/package/@babel/cli.md) ^7.17.3
- [babel-core](https://npm.io/package/babel-core.md) ^6.26.3
- [redux-form](https://npm.io/package/redux-form.md) ^8.3.8
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.17.5
- [react-redux](https://npm.io/package/react-redux.md) ^7.2.6
- [react-player](https://npm.io/package/react-player.md) ^2.9.0
- [@mui/material](https://npm.io/package/@mui/material.md) ^5.4.2
- [babel-runtime](https://npm.io/package/babel-runtime.md) ^6.26.0
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.8.1
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.8.1
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.16.11
- [styled-components](https://npm.io/package/styled-components.md) ^5.3.3
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.16.7
- [react-ui-css-builder](https://npm.io/package/react-ui-css-builder.md) ^0.0.20
- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) ^0.1.17
- [@fortawesome/fontawesome-svg-core](https://npm.io/package/@fortawesome/fontawesome-svg-core.md) ^1.3.0
- [@fortawesome/free-solid-svg-icons](https://npm.io/package/@fortawesome/free-solid-svg-icons.md) ^6.0.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.3 (latest) — 2022-04-08

## README

<div align="center">
   <p>
    <h1>react-form-planner</h1>
  </p>
  <p>
     <i>Build or view, your beautiful form is just a click away.</i>
     <br/>
     <i>No technical knowledge is required.</i>
     <br/>
     <b>NO BACKEND,Entirely based on frontend.</b>
  </p>

  <p>

  </p>
</div>

---

![GitHub watchers](https://img.shields.io/github/watchers/koustov/react-form-planner.svg?logo=github&label=Watch) ![GitHub watchers](https://img.shields.io/github/issues/koustov/react-form-planner?logo=github&label=Issues) ![GitHub watchers](https://img.shields.io/github/stars/koustov/react-form-planner?logo=github&label=Stars) ![GitHub watchers](https://img.shields.io/npm/dt/react-form-planner.svg?logo=npm&label=downloads)

This is a **fully customizable** form builder based on [`React`](https://facebook.github.io/react/)

**Table of Contents**

- [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)
- [Playground](#playground-1)
- [Screenshots](#screenshots)
- [Items in queue](#items-in-queue)
- [Contribution 🍰](#contribution-)
- [License](#license)

## Demo

Visit https://react-form-planner.vercel.app/

## Playground

Visit https://codesandbox.io/s/react-form-planner-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 react-form-planner
```

or

```bash
yarn add react-form-planner
```

## 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
<FormPlanner
  onControlValueChanged={() => {
    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
  ![image info](./docs/images/fp.PNG)

### 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
<FormViewer
  onChange={(a, b, c) => {
    console.log('Value received')
  }}
  template={<template_data>}
/>
```

## Playground

Getting built

## Screenshots

Form Planner example
![image info](./docs/images/ff.PNG)

Edit element on hover
![image info](./docs/images/edit.PNG)

Edit element
![image info](./docs/images/editelement.PNG)

Prebuilt Customization
![image info](./docs/images/custom1.PNG)

Or add your own custmization
![image info](./docs/images/custom2.PNG)

## 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)

---
_Source: https://npm.io/package/k-react-form-builder · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._