react-form-viewer v1.0.9

This is a fully customizable form builder based on React

Table of Contents

• Demo
• Playground
• Features
• When do you need it
• Usage
  • Install 🐙
• Highlight 🔥
  • Form Builder
  • How to use
  • Supported Elements
  • Form Properties
  • Form Parameters
  • Preview your form
  • Form Viewer
  • How to use
• Playground
• Screenshots
• Items in queue
• Contribution 🍰
• License

Demo

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

Playground

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

npm install react-form-viewer

or

yarn add react-form-viewer

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

import { FormPlanner } from 'react-form-viewer'

Just drop it to desired place

<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

Form Properties

Allows to add/update form meta information like

• Title
• Description
• Header background image
• Header background color
• Background image
• Background color

Form Parameters

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

import { FormPlanner } from 'react-form-viewer'

Just drop it to desired place

<FormViewer
  onChange={(key_name, balue, field_definition) => {
    console.log('Value received')
  }}
  template={<template_data>}
/>

Playground

Getting built

Screenshots

Form Planner example

Edit element on hover

Edit element

Prebuilt Customization

Or add your own custmization

Items in queue

• Localization

Contribution 🍰

Feel free to create issue and make pull request

Refer code of conduct

Refer contributing

License

MIT © Koustov