npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

devphenomenon-react-form-builder2

v0.17.4

Published

A complete form builder for react.

Downloads

39

Readme

npm version downloads

React Form Builder 2

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

  • Upgraded to React 16.8.6
  • Bootstrap 4.x, Font-Awesome 5.x
  • Use react-dnd for Drag & Drop
  • Save form data with dummy api server
  • Show posted data on readonly form
  • Multi column row
  • Custom Components

DEMO Slow Loading.... back-end is running at FREE Heroku, hence it may not work if free time runs out for month.

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' />

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.

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

$ yarn install
$ yarn run build:dist
$ yarn run serve:api
$ yarn 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} />;
});
  • Register custom components to be used in form builder
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

$ npm test

Test is not working at this moment.