Skip to main content

Introducing Workflow Engine, try for FREE workflowengine.io.

QR code

Overview

This component is in a separate NPM package @react-form-builder/components-fast-qr. It is based on fast_qr package.

Installation

Use the following command to install the package:

npm install @react-form-builder/components-fast-qr

Connection to FormBuilder component

The example below assumes that you also have the components from the @react-form-builder/components-rsuite package installed and the QR code component is additionally attached:

import {rSuiteComponents} from '@react-form-builder/components-rsuite'
import {BuilderView, FormBuilder} from '@react-form-builder/designer'
import {fastQrComponent} from '@react-form-builder/components-fast-qr'

const components = rSuiteComponents.map((c) => c.build())
const builderView = new BuilderView([...components, fastQrComponent.build()])

function App() {
return <FormBuilder view={builderView}/>
}

Connect to FormViewer component

The example below shows how to connect the QR code component along with the @react-form-builder/components-rsuite components:

import {fastQrModel} from '@react-form-builder/components-fast-qr'
import {rSuiteComponents} from '@react-form-builder/components-rsuite'
import {FormViewer, View} from '@react-form-builder/core'

const components = [
...rSuiteComponents.map((c) => c.build().model),
fastQrModel,
]
const view = new View(components)

const form = `{
"form": {
"key": "Screen",
"type": "Screen",
"props": {},
"children": [
{
"key": "qrCode",
"type": "FastQR",
"props": {}
}
]
}
}`

function App() {
return <FormViewer view={view} getForm={() => form}/>
}