@react-form-builder/viewer-bundle

v7.8.0

Published

6 days ago

Optimajet Form Builder Develop front-end drag n drop forms with ease.

0High
0Medium
0Low

ojroot

form-builder optimajet

OptimaJet React Form Builder Viewer bundle

This library is part of the React Form Builder project.

Key Features

UI-Agnostic Components: Works seamlessly with any UI library (MUI, Ant Design, shadcn/ui and others)
Pre-Built React Suite Integration: Includes a ready-to-use component library – @react-form-builder/components-rsuite.
Framework Support:
- Next.js Integration: Seamlessly works with Next.js.
- Remix Compatibility: Fully supports Remix.
- Framework-Agnostic: Can also be used without any framework via CDN.
Multi-Database Support: Compatible with MySQL, PostgreSQL, MongoDB, SQLite, and more.
Built-in Validation with Zod: Includes pre-configured validation rules powered by Zod.
Extensible Validation Support: Works with Yup, AJV, Zod, Superstruct, Joi, and other custom validation libraries.
Responsive Layouts: Build forms that automatically adapt to all screen sizes.
Custom Actions: Enhance forms with interactive logic through custom JavaScript code.
Dynamic Properties: Implement real-time component changes with MobX-powered reactive properties.
Flexible Storage Options:
- Store complete form definitions as JSON.
- Programmatically generate forms via code.

Install

No installation required. Just include the script via CDN or host it on your own server.

Quickstart

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>FormEngine bundle embedding example</title>
  <script src="https://unpkg.com/@react-form-builder/viewer-bundle@latest/dist/index.iife.js" async defer></script>
</head>
<body style="margin: 20px">
<div id="viewer"></div>

<script type="text/javascript">
  window.onload = function () {
    const {buildForm, renderFormViewer, rSuiteComponents} = window.FormEngineViewerBundle;

    const simpleForm = buildForm({errorType: 'RsErrorMessage'})
      .component('container', 'RsContainer')
      .style({flexDirection: 'row'})
      .children((builder) =>
        builder
          .component('firstName', 'RsInput')
          .prop('placeholder', 'Enter your first name')
          .prop('label', 'First Name')
          .validation('required')

          .component('lastName', 'RsInput')
          .prop('placeholder', 'Enter your last name')
          .prop('label', 'Last Name')
          .validation('required')
      )

      .component('birthDate', 'RsDatePicker')
      .prop('label', 'Birth Date')
      .prop('oneTap', true)
      .validation('min').args({value: '1900-01-07T12:25:37.000Z'})

      .component('submit', 'RsButton')
      .prop('children', 'Submit')
      .prop('color', 'blue')
      .prop('appearance', 'primary')
      .event('onClick')
      .commonAction('validate').args({failOnError: true})
      .customAction('onSubmit')
      .json()

    const props = {
      view: rSuiteComponents.viewWithCss,
      getForm: () => simpleForm,
      actions: {
        onSubmit: (e) => {
          // submit the form to the backend
          alert('Form data: ' + JSON.stringify(e.data))
        }
      }
    }

    window.viewerRoot = renderFormViewer('viewer', props)
  }
</script>
</body>
</html>

Resources

Licensing

This library is distributed under the MIT license.

Important: Some features and modules (e.g., Form Designer) are only available under a commercial license.

If you are interested in using the full version of the product, please contact us or visit the product website for licensing information.

Published

Vulnerabilities

Links

Maintainers

Keywords