JQuery Form-Builder with ReactJS

Question

So, I am supposed to build a form-builder which would be integrated to an application. My job is only to design the front-end. Note that I am supposed to use ReactJS for the project. The requirement that is given by the client is very similar to the features of "jQuery From-Builder" so I chose it. But I am facing many issues using it. I mean the documentation has explained the form in context of JavaScript and not specifically ReactJS. When I try to use those functions and actions in REACT, it doesn't work.

For example this one:

var fields = [{
  label: "Email",
  type: "text",
  subtype: "email",
  icon: "✉"
}];
$(container).formBuilder({fields})

So, in the demo it was adding a field to the formbuilder named "email". but here it did't work. And many other codes that are given in the documentation. Actually the major problem is I am not an expert in JavaScript yet so it's terrible for me to understand this library as there are many files and I always get confused whenever I through the files.

I really need a pathway that how can i build this module.

P.s: Basically the module should contain: A canvas box in which the components(textboxes, heading, name, image etc) could be dropped.. The toolbar where arll the components will be present(on top). When it'd be dragged and dropped into the canvas it's properties (color,fonts) be seen in the box on the right side. Much complexity like properties isn't needed yet but.... I hope you got me... Please help! Thankyou so much!

Answer 1

@muneeb, I have recently been doing similar review, trying to find a form builder/render app that I can add INTO our existing React application. Below are a couple products that I have just recently been looking at that might fit what you're looking for in a React solution.

• Form.io
  • This appears like a very robust framework. Although the base FormioJS package isn't React based, they provide a @formio/React package that provides React development access to the FormioJS codebase. I was able to proof out a quick example in no time, both with the builder and the renderer. It is built on an open source project that appears to be pretty active.
• Form Builder
  • This is another app that I am currently reviewing. It is built with React, so looks like it would be native to what you are looking for. It appears to be a proprietary application, so no access to the code.

Those are a couple that I have found that we can use WITHIN our React app and don't have to jump outside our application for a cloud/SaaS solution.

FWIW