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

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

Quickstart

`typescript jsx
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 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.