Installation
Designer
The form designer in Form Builder is represented by the React
component FormBuilder. The FormBuilder
component is located in the
package @react-form-builder/designer.
To install the package in your application, use the command:
npm install @react-form-builder/designer
If your package manager does not support automatic installation of peer dependencies, for example you use the --legacy-peer-deps
flag in
npm, then you need to install peer dependencies manually.
npm install @emotion/css@11.10.5 @emotion/react@11.10.5 @emotion/styled@11.10.5 mobx@6.9.0 rsuite@5.59.1 rsuite-table@5.10.3 --save-exact
Below is sample code for embedding the FormBuilder
component into your application:
import React from 'react'
import {BuilderView, FormBuilder} from '@react-form-builder/designer'
const builderView = new BuilderView([])
function App() {
return <FormBuilder view={builderView}/>
}
export default App
You can find a description of the component properties in the FormBuilderProps API. The only mandatory property is view, which is a description of the component metadata used to design the form.
You can use the pre-built components found in the @react-form-builder/components-rsuite package to start a form designer with a populated set of components.
Run the following command to install the package:
npm install @react-form-builder/components-rsuite
If your package manager does not support automatic installation of peer dependencies, for example you use the --legacy-peer-deps
flag in
npm, then you need to install peer dependencies manually.
npm install @emotion/css@11.10.5 @emotion/react@11.10.5 @emotion/styled@11.10.5 @rsuite/icons@1.0.2 react-number-format@5.1.4 rsuite@5.59.1 --save-exact
Then copy and paste the code below:
import React from 'react'
import {rSuiteComponents} from '@react-form-builder/components-rsuite'
import {BuilderView, FormBuilder} from '@react-form-builder/designer'
const components = rSuiteComponents.map(c => c.build())
const builderView = new BuilderView(components)
function App() {
return <FormBuilder view={builderView}/>
}
export default App
This is the minimal React component code with which you can add a form designer to your application.
Viewer
The FormViewer component is responsible for displaying the form in Form
Builder. The FormBuilder uses the FormViewer
component to display
the form in the center panel.
To install the package in your application, use the command:
npm install @react-form-builder/core
If your package manager does not support automatic installation of peer dependencies, for example you use the --legacy-peer-deps
flag in
npm, then you need to install peer dependencies manually.
npm install @emotion/cache@11.10.5 @emotion/css@11.10.5 @emotion/react@11.10.5 @emotion/styled@11.10.5 mobx@6.9.0 mobx-react@7.6.0 rxjs@7.8.0 stylis-plugin-rtl@2.1.1 --save-exact
The FormViewer
component receives as input the properties described in the
type FormViewerProps.
Let's look at an example of a simple application using a FormViewer
component with a set of components from the React Suite library:
import React from 'react'
import {view} from '@react-form-builder/components-rsuite'
import {FormViewer} from '@react-form-builder/core'
const form = `{
"form": {
"key": "Screen",
"type": "Screen",
"props": {},
"children": [
{
"key": "RsInput 1",
"type": "RsInput",
"props": {}
}
]
}
}`
function App() {
return <FormViewer view={view} getForm={_ => form}/>
}
export default App
This code sample creates a form
variable that contains a JSON form string, there is one input field on the form. In the component
FormViewer
is passed the mandatory view property, which is a set
of component metadata for the React Suite library. As well as
the getForm property, which accepts a function that returns the
value of the form
variable.
CDN
You can immediately start using the FormEngine without using npm, bundlers and other frontend infrastructure by installing it via CDN. Two bundles are provided:
- designer bundle: https://unpkg.com/@react-form-builder/designer-bundle@latest/dist/index.iife.js
- viewer bundle: https://unpkg.com/@react-form-builder/viewer-bundle@latest/dist/index.iife.js
Here's an example of the usage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FormEngine bundle embedding example</title>
<script src="https://unpkg.com/@react-form-builder/designer-bundle@latest/dist/index.iife.js" async defer></script>
<script src="https://unpkg.com/@react-form-builder/viewer-bundle@latest/dist/index.iife.js" async defer></script>
</head>
<body style="margin: 0">
<div id="designer"></div>
<div id="viewer"></div>
<script type="text/javascript">
window.onload = function () {
const props = {
getForm: () => form
}
const designerBundle = window.FormEngineDesignerBundle;
window.reactRoot = designerBundle.renderFormBuilder('designer', props)
const viewerBundle = window.FormEngineViewerBundle;
window.designerRoot = viewerBundle.renderFormViewer('viewer', props)
}
const form = `
{
"version": "1",
"form": {
"key": "Screen",
"type": "Screen",
"props": {},
"children": [
{
"key": "RsInput",
"type": "RsInput",
"props": {}
}
]
},
"localization": {},
"languages": [
{
"code": "en",
"dialect": "US",
"name": "English",
"description": "American English",
"bidi": "ltr"
}
],
"defaultLanguage": "en-US"
}
`
</script>
</body>
</html>