react-form-builder-more-flexibility

v1.0.74

Published

5 days ago

A complete form builder for react.

0High
0Medium
0Low

ljorgens

react react-component form builder ui drag drop

React Form Builder 2

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

Upgraded to React 18.3.1
Upgraded related packages

Editing Items

Basic Usage

import React from "react";
import ReactDOM from "react-dom";
import { ReactFormBuilder } from "react-form-builder2";
import "react-form-builder2/dist/app.css";

ReactDOM.render(<ReactFormBuilder />, document.body);

Props

var items = [
  {
    key: "Header",
    name: "Header Text",
    icon: "fa fa-header",
    static: true,
    content: "Placeholder Text...",
  },
  {
    key: "Paragraph",
    name: "Paragraph",
    static: true,
    icon: "fa fa-paragraph",
    content: "Placeholder Text...",
  },
];

<ReactFormBuilder
  url="path/to/GET/initial.json"
  toolbarItems={items}
  saveUrl="path/to/POST/built/form.json"
/>;

The element edit panel

Clicking an item's edit button opens its edit panel. Every field in the panel edits a draft; nothing reaches the form (or onPost) until the draft is committed.

Save commits the draft and closes the panel.
Cancel discards the draft and closes the panel.
A click anywhere outside the panel closes it the way Save does: the draft is committed (a field that only reports its value on blur, such as an option row, is blurred first). If the draft is invalid — a required custom name left blank — the panel stays open and shows why. If nothing changed, nothing is committed.

Pop-ups opened from inside the panel

A pop-up is usually mounted on <body>, so its DOM is outside the panel even though the operator is still working in the panel. A mousedown inside either of these is not treated as an outside click:

a SweetAlert2 dialog (.swal2-container);
any element carrying data-rfb-keep-edit-open.

If your renderRichTextEditor (or any control you render in the panel) opens a modal, popover or portal that is mounted outside the panel, put the attribute on the pop-up's ROOT element — the one the click lands inside:

ReactDOM.createPortal(
  <div className="my-link-popover" data-rfb-keep-edit-open>
    ...
  </div>,
  document.body,
);

Check where a component library actually puts extra attributes: some modal components spread them onto the inner dialog rather than the backdrop wrapper, and a click on the backdrop would then still count as outside.

Without it, the first click into the pop-up counts as a click outside the panel: the panel commits and closes behind the pop-up, and whatever the pop-up was about to insert (a link, a colour, an image) lands in an editor that no longer exists. Mounting the pop-up inside the panel's DOM avoids the question entirely.

React Form Generator

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

import React from "react";
import ReactDOM from "react-dom";
import { ReactFormGenerator } from "react-form-builder2";
import "react-form-builder2/dist/app.css";

ReactDOM.render(
  <ReactFormGenerator
    form_action="/path/to/form/submit"
    form_method="POST"
    task_id={12} // Used to submit a hidden variable with the id to the form from the database.
    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.
    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.
    data={JSON_QUESTION_DATA} // Question data
  />,
  document.body
);

Form Params

| Name | Type | Required? | Description | | ------------------ | -------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | form_action | string | Required | URL path to submit the form | | form_method | string | Required | Verb used in the form submission. | | action_name | string | Optional | Defines form submit button text. Defaults to "Submit" | | onSubmit | function | optional | Invoke when submit data, if exists will override form post. | | onChange | function | optional | Invoke when Change data. only on generator | | onBlur | function | optional | Invoke when Blur data. only on generator | | data | array | Required | Question data retrieved from the database | | back_action | string | Optional | URL path to go back if needed. | | back_name | string | Optional | Button text for back action. Defaults to "Cancel". | | task_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database. | | answer_data | array | Optional | Answer data, only used if loading a pre-existing form with values. | | authenticity_token | string | Optional | If using Rails and need an auth token to submit form. | | hide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true. | | skip_validations | boolean | Optional | Suppress form validations on submit, if set to true. | | display_short | boolean | Optional | Display an optional "shorter page/form" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements. | | read_only | boolean | Optional | Shows a read only version which has fields disabled and removes "required" labels. | | variables | object | Optional | Key/value object that can be used for Signature variable replacement. | | option_key_value | string | Optional | Use "key" or "value" of checked option item in json data, default is "key". |

Read only Signatures

Read only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the variables property to ReactFormGenerator and ReactFormBuilder.

To use a read only signature, choose the "Read only" option and enter the key value of the variable that will be used to pass in the signature.

The signature data should be in base 64 format.

There is a variables.js file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key "JOHN" to test the variable replacement.

Vendor Dependencies

In order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from Bootstrap and FontAwesome must be added to index.html. See the example code in index.html for more details.

Bootstrap
FontAwesome

SASS

All relevant styles located in css/application.css.scss.

Develop

$ npm install
$ NODE_OPTIONS=--openssl-legacy-provider npm run build:dist
$ npm run serve:api
$ NODE_OPTIONS=--openssl-legacy-provider npm run start

Then navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.

Customizations

to customize the field edit form copy "src/form-elements-edit.jsx" to your project and pass it to the ReactFormBuilder as a prop. Here is an example

<ReactFormBuilder
  edit
  data={form}
  //toolbarItems={items}
  customToolbarItems={items}
  onChange={handleUpdate}
  onSubmit={handleSubmit}
  renderEditForm={(props) => <FormElementsEdit {...props} />}
/>

to customize the ReactFormGenerator submit button use it like this

<ReactFormGenerator
  data={form}
  toolbarItems={items}
  onSubmit={handleSubmit}
  actionName="Set this to change the default submit button text"
  submitButton={
    <button type="submit" className="btn btn-primary">
      Submit
    </button>
  }
  backButton={
    <a href="/" className="btn btn-default btn-cancel btn-big">
      Back
    </a>
  }
/>

Custom Components

Import component registry from react-form-builder2

import { ReactFormBuilder, ElementStore, Registry } from "react-form-builder2";

Simple Custom Component

const TestComponent = () => <h2>Hello</h2>;

Custom Component with input element

const MyInput = React.forwardRef((props, ref) => {
  const { name, defaultValue, disabled } = props;
  return (
    <input
      ref={ref}
      name={name}
      defaultValue={defaultValue}
      disabled={disabled}
    />
  );
});

Registry.register("MyInput", MyInput);
Registry.register("TestComponent", TestComponent);

Define Custom Components in Toolbar

const items = [
  {
    key: "TestComponent",
    element: "CustomElement",
    component: TestComponent,
    type: "custom",
    field_name: "test_component",
    name: "Something You Want",
    icon: "fa fa-cog",
    static: true,
    props: { test: "test_comp" },
    label: "Label Test",
  },
  {
    key: "MyInput",
    element: "CustomElement",
    component: MyInput,
    type: "custom",
    forwardRef: true,
    field_name: "my_input_",
    name: "My Input",
    icon: "fa fa-cog",
    props: { test: "test_input" },
    label: "Label Input",
  },
  // Additional standard components, you don't need full definition if no modification is required.
  {
    key: "Header",
  },
  {
    key: "TextInput",
  },
  {
    key: "TextArea",
  },
  {
    key: "RadioButtons",
  },
  {
    key: "Checkboxes",
  },
  {
    key: "Image",
  },
];

Use defined Toolbar in ReactFormBuilder

  <ReactFormBuilder
    ...
    toolbarItems={items}
  />

Find working example here

Examples

Tests

$ yarn test

Jest (jsdom) over test/, using the repo's own Babel config. Tests live outside src/ on purpose: npm run transpile copies everything under src/ into the published lib/.