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