@react-form-builder/components-rsuite

OptimaJet React Form Builder RSuite components library

This library is part of the React Form Builder project.

This package contains visual components based on React Suite. To learn how to use the package, see our documentation.

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.
• Localization - Powerful capabilities for localizing forms using Fluent.js.
• 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

npm install @react-form-builder/core @react-form-builder/components-rsuite

Quickstart

import {viewWithCss} from '@react-form-builder/components-rsuite'
import {buildForm, FormViewer} from '@react-form-builder/core'

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()

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

Resources

• Website
• Documentation
• Demo

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.