Skip to content
A complete rewrite of cb-react-form-builder
JavaScript CSS HTML
Branch: dev
Clone or download
Pull request Compare This branch is 17 commits ahead, 1 commit behind NarasimhaReddyY:dev.
NarasimhaReddyY Merge pull request #4 from Codebrahma/demo-app-link
added demo application's code link
Latest commit 98907d6 Jul 29, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css fix: multiple react instances Jun 27, 2019
pictures added form-builder gif Jul 20, 2019
public
src indentation fix Jul 26, 2019
.babelrc Initial Commit May 22, 2019
.eslintignore Initial Commit May 22, 2019
.eslintrc Initial Commit May 22, 2019
.gitignore Initial Commit May 22, 2019
.npmignore Added Email field to the toolbar item. Added option to choose 'step' … Jul 1, 2019
CHANGELOG.md updated README and added CHANGELOG to document changes Jul 29, 2019
LICENSE Initial Commit May 22, 2019
README.md Merge pull request #4 from Codebrahma/demo-app-link Jul 29, 2019
index.js fix: multiple react instances Jun 27, 2019
index.scss exporting modules from index.js and other minor refactors Jun 25, 2019
package-lock.json
package.json Minor version change Jul 29, 2019
webpack.common.js fix: multiple react instances Jun 27, 2019
webpack.dev.js Initial Commit May 22, 2019
webpack.prod.js build ready Jun 26, 2019

README.md

CB React Forms npm version License: MIT

React Form Builder

Form Builder GIF

Form Builder DEMO (github)

A complete react form builder that interfaces with json data to load and save generated forms.

Basic Usage

import React from "react";
import ReactDOM from "react-dom";
import { FormBuilder } from "cb-react-forms";

const Example = props => (
  <FormBuilder 
    onSubmit={}
    items={}
  />;
);

ReactDOM.render(<Example />, document.getElementById("root"));

Props

const items = [
  {
    key: "Header",
    name: "Header Text",
    icon: "fa fa-header"
  },
  {
    key: "Paragraph",
    name: "Paragraph",
    icon: "fa fa-paragraph"
  },
  {
    key: "Dropdown",
    name: "Dropdown",
    icon: "fa fa-caret-square-o-down"
  }
];

const onSubmitFunc = () => {
  // Submit Function
};

<FormBuilder 
  items={items} 
  onSubmit={onSubmitFunc} 
/>

Form Builder Params:

Name Type Required Description
onSubmit function Required Invoked on Export Form, gets formData as the argument.
items array Optional List of toolbar items, list of avaiable items can be found below.

Editing Items:

React Form Generator

Now that the form is built and saved, let's generate it from the saved json.

import React from "react";
import ReactDOM from "react-dom";
import { FormGenerator } from 'cb-react-forms';

const Example = props => (
  <FormGenerator 
    formData={}
    onSubmit={}
  />
);

ReactDOM.render(<Example />, document.getElementById("root"));

Form Generator Params

Name Type Required Description
formData array Required List of questions data retrieved from FormBuilder.
onSubmit function Required Invoked on form submit, gets answers data as the argument.
readOnly boolean Optional Show a read only version which has fields disabled and removed "Required" labels.
responseData object Optional Answer data, only loads if loading a pre-existing form with values.

Demo Form:

List of Toolbar items:

const items = [
  {
    key: "Header",
    name: "Header Text",
    icon: "fa fa-header"
  },
  {
    key: "Label",
    name: "Label",
    icon: "fa fa-font"
  },
  {
    key: "Paragraph",
    name: "Paragraph",
    icon: "fa fa-paragraph"
  },
  {
    key: "LineBreak",
    name: "Line Break",
    icon: "fa fa-arrows-h"
  },
  {
    key: "Dropdown",
    name: "Dropdown",
    icon: "fa fa-caret-square-o-down"
  },
  {
    key: "Tags",
    name: "Tags",
    icon: "fa fa-tags"
  },
  {
    key: "Checkboxes",
    name: "Checkboxes",
    icon: "fa fa-check-square-o"
  },
  {
    key: "RadioButtons",
    name: "Multiple Choice",
    icon: "fa fa-dot-circle-o"
  },
  {
    key: "TextInput",
    name: "Text Input",
    icon: "fa fa-font"
  },
  {
    key: "NumberInput",
    name: "Number Input",
    icon: "fa fa-plus"
  },
  {
    key: "TextArea",
    name: "Multi-line Input",
    icon: "fa fa-text-height"
  },
  {
    key: "Rating",
    name: "Rating",
    icon: "fa fa-star"
  },
  {
    key: "HyperLink",
    name: "Web site",
    icon: "fa fa-link"
  },
  {
    key: "Range",
    name: "Range",
    icon: "fa fa-sliders"
  },
  {
    key: "Email",
    name: "Email",
    icon: "fa fa-at"
  },
  {
    key: "Date",
    name: "Date",
    icon: "fa fa-calendar"
  },
  {
    key: "Signature",
    name: "Signature",
    icon: "fa fa-edit"
  }
];

// NOTE: You can edit the name and the icon (FontAwesome classes) fields but **do not** change the key.

Read Only Form:

Dependencies

In order to make the Form Builder secure and pretty, there are a few dependencies other than React.

  • redux-form
  • draft-js
  • react-draft-wysiwyg
  • react-dnd
  • react-star-ratings
  • react-select

Develop

$ npm install
$ npm start

Navigate to localhost:8080/ in your browser and you should be able to see the Form Builder in action.

You can’t perform that action at this time.