@syncfusion/ej2-react-form-renderer 0.1.2-beta → 34.2.2

package/README.md

@@ -1,141 +1,124 @@
-# EJ2 React Form Renderer
+# React Form Renderer Component
 
-The `@syncfusion/ej2-react-form-renderer` package is a powerful React component for rendering dynamic, JSON-driven forms using Syncfusion's Essential® Studio React components.
+## What's Included in the React Form Renderer Package
 
-## Key Features
+The React Form Renderer package is a schema-driven form rendering and validation engine. It consumes a JSON form schema and renders a fully functional, Syncfusion-based form that supports field mapping, conditional visibility/disabling, expression-based value computation, custom validation, and data submission.
 
-- **JSON-Driven Forms**: Render forms from JSON schemas (FormSchema, DataSchema, or UISchema)
-- **20+ Field Types**: Support for textbox, textarea, number, dropdown, datepicker, checkbox, radio, switch, and more
-- **Advanced Layouts**: Panels, tables, tabs for complex form structures
-- **Validation**: Built-in validation with Syncfusion FormValidator
-- **Theming**: Support for all Syncfusion themes (Material, Bootstrap, Fluent, Tailwind, etc.)
-- **Accessibility**: WCAG 2.1 AA compliant
-- **TypeScript Support**: Full type definitions included
+<p align="center">
+    <a href="https://ej2.syncfusion.com/react/documentation/introduction?utm_source=npm&utm_medium=listing&utm_campaign=react-form-renderer-npm">Getting Started</a> .
+    <a href="https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-form-renderer-npm">Online demos</a> .
+    <a href="https://www.syncfusion.com/react-ui-components?utm_source=npm&utm_medium=listing&utm_campaign=react-form-renderer-npm">Learn more</a>
+</p>
 
-## Installation
+<p align="center">
+<img alt="React Form Renderer Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/react/react-form-renderer.png">
+</p>
 
-To install `@syncfusion/ej2-react-form-renderer` and its dependencies, run:
+## Form Renderer (React)
 
-```sh
-npm install @syncfusion/ej2-react-form-renderer
-```
+The [React Form Renderer](https://www.syncfusion.com/react-ui-components?utm_source=npm&utm_medium=listing&utm_campaign=react-form-renderer-npm) component renders a fully interactive, validation-enabled form from a JSON schema. It is built on top of the Syncfusion Essential JS 2 React suite (inputs, dropdowns, calendars, grids, navigation, popups, and rich text editor) and exposes a `<FormRenderer />` component that is the source of truth for the form-renderer contract.
 
-## Usage
+#### Key features
 
-### Basic Example
+* **Schema-driven rendering** — Consumes a JSON `FormSchema` (or Unified Schema) describing the form's version, fields (`properties`), layout, and global settings, then renders the form automatically.
+* **30+ field types** — Maps every supported `component.type` to the equivalent Syncfusion EJ2 React component (textbox, textarea, number, checkbox, checkbox group, radio, dropdown, multiselect, date, dateTime, time, date range, switch, button, split button, signature, rating, color picker, input mask, range slider, file upload, image editor, message, panel, table, tabs, data grid, lookup, static HTML, card, rich text editor).
+* **Built-in validation** — Uses the native EJ2 `FormValidator` to enforce `required`, `minLength`, `maxLength`, `min`, `max`, `regex`, and custom expression rules. Auto-applies email/URL regexes for `textbox` with `textboxType` set.
+* **Conditional logic** — `visibleWhen`, `hideWhen`, `readOnlyWhen`, `disabledWhen`, `requiredWhen`, `setValueWhen`, choice-based field filtering, and conditional data sources for data grids.
+* **Expression engine** — Computed fields via `expressionValue` with topological evaluation order, cycle detection, and per-target-type coercion.
+* **Layouts & composition** — Single/Two/Three/Four column layouts, panels, tables, tabs, cards, and per-column width control.
+* **Events** — `created`, `onChange`, `onSubmit`, `onButtonClick`, and `onFailure` for full integration.
+* **Localization & RTL** — `locale` and `enableRtl` are threaded into every rendered Syncfusion React control.
+
+### Usage
 
 ```tsx
-import React from 'react';
+import * as React from 'react';
 import { FormRenderer } from '@syncfusion/ej2-react-form-renderer';
-import '@syncfusion/ej2-react-form-renderer/styles/tailwind3.css'; // Choose your theme
-
-const schema = {
-  "version": "1.0.0-beta",
-  "properties": {
-    "firstName": {
-      "id": "textbox_1773902761966_849",
-      "type": "string",
-      "label": "First Name",
-      "required": true
-    },
-    "lastName": {
-      "id": "textbox_1773902782931_266",
-      "type": "string",
-      "label": "Last Name",
-      "required": true
-    },
-    "age": {
-      "id": "number_1773902793792_571",
-      "type": "number",
-      "label": "Age",
-      "required": true
-    },
-    "dateOfBirth": {
-      "id": "datepicker_1773902807416_662",
-      "type": "string",
-      "format": "date",
-      "label": "Date of Birth",
-      "required": true
-    },
-    "submit": {
-      "id": "submit_button_initial",
-      "type": "button",
-      "label": "Submit",
-      "buttonType": "submit"
-    }
-  }
-};
 
-function App() {
-  const handleSubmit = (args) => {
-    console.log('Form submitted:', args.data);
-    console.log('Is valid:', args.isValid);
-  };
-
-  const handleChange = (args) => {
-    console.log('Field changed:', args.field, args.value);
-  };
+const formSchema = {
+  version: '0.1.0',
+  properties: {
+    name:    { type: 'textbox',     label: 'Name',    required: true },
+    email:   { type: 'textbox',     label: 'Email',   textboxType: 'email' },
+    role:    { type: 'dropdown',    label: 'Role',    options: ['Admin', 'User'] },
+    accept:  { type: 'checkbox',    label: 'Accept Terms', required: true }
+  },
+  layout: [
+    { row: 0, col: 0, field: 'name'   },
+    { row: 1, col: 0, field: 'email'  },
+    { row: 2, col: 0, field: 'role'   },
+    { row: 3, col: 0, field: 'accept' }
+  ]
+};
 
+export default function App() {
   return (
     <FormRenderer
-      schema={schema}
-      onSubmit={handleSubmit}
-      onChange={handleChange}
+      schema={formSchema}
+      onSubmit={(args) => console.log(args.data, args.isValid)}
     />
   );
 }
-
-export default App;
 ```
 
-## Supported Field Types
+<p align="center">
+Trusted by the world's leading companies
+  <a href="https://www.syncfusion.com/">
+    <img src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/syncfusion/syncfusion-trusted-companies.webp" alt="Syncfusion logo">
+  </a>
+</p>
 
-- Basic inputs: `textbox`, `textarea`, `number`, `inputmask`
-- Selection controls: `dropdown`, `multiselect`, `radio`, `checkbox`, `checkboxgroup`
-- Date/time: `datepicker`, `datetimepicker`, `timepicker`, `daterange`
-- Rich inputs: `switch` (toggle), `colorpicker`, `rating`, `signature`, `imageeditor`, `richtexteditor`, `fileupload`, `rangeslider`
-- Layout & containers: `panel` (section), `table` (cells), `tabs`, `card`, `message` (alert), `statichtml`
-- Data display / complex controls: `datagrid` (embedded grid)
-- Buttons: `button`, `splitbutton` and grouped button configurations (`buttonsGroups`)
+## Setup
 
+To install the form renderer and its dependent packages, use the following command.
 
-## API Reference
+```sh
+npm install @syncfusion/ej2-react-form-renderer
+```
 
-### FormRenderer Props
+The React Form Renderer pulls in its required EJ2 React peers automatically (inputs, calendars, dropdowns, buttons, split buttons, grids, navigation, popups, notifications, rich text editor, image editor).
 
-| Prop | Type | Description |
-|------|------|-------------|
-| `schema` | `Schema \| FormSchema \| string` | Form schema (JSON or object) |
-| `layout` | `'single' \| 'twocolumn' \| 'threecolumn' \| 'fourcolumn'` | Form layout (when no UI schema) |
-| `onSubmit` | `(args: SubmitEventArgs) => void` | Submit handler |
-| `onChange` | `(args: ChangeEventArgs) => void` | Field change handler |
-| `onButtonClick` | `(args: ButtonClickEventArgs) => void` | Button click handler |
-| `created` | `() => void` | Called when form is ready |
-| `className` | `string` | Additional CSS classes |
+## Supported frameworks
 
-### FormLayout
+The Form Renderer is also offered in following list of frameworks.
 
-```tsx
-export const FormLayout = {
-  SingleColumn: 'single',
-  TwoColumn: 'twocolumn',
-  ThreeColumn: 'threecolumn',
-  FourColumn: 'fourcolumn'
-} as const;
-```
+| [<img src="https://ej2.syncfusion.com/github/images/js.svg" height="50" />](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/angular-new.svg"  height="50" />](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Angular](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/vue.svg" height="50" />](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/netcore.svg" height="50" />](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;[ASP.NET&nbsp;Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/netmvc.svg" height="50" />](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;[ASP.NET&nbsp;MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; | 
+| :-----: | :-----: | :-----: | :-----: | :-----: |
+
+## Showcase samples
+
+* Job Application Form - [Source](https://github.com/syncfusion/ej2-showcase-react-form-renderer), [Live Demo](https://ej2.syncfusion.com/showcase/react/form-renderer/?utm_source=npm&utm_campaign=form-renderer)
+* Survey Builder - [Source](https://github.com/syncfusion/ej2-showcase-react-survey), [Live Demo](https://ej2.syncfusion.com/showcase/react/survey/?utm_source=npm&utm_campaign=form-renderer)
 
+## Resources
+
+* [Documentation](https://ej2.syncfusion.com/react/documentation/introduction)
+* [Theme Studio](https://ej2.syncfusion.com/themestudio/)
+* [What's New](https://www.syncfusion.com/products/whatsnew/react?utm_medium=listing&utm_source=github)
+* [Road Map](https://www.syncfusion.com/products/roadmap/react)
+* [E-Books](https://www.syncfusion.com/succinctly-free-ebooks?searchkey=react&type=all)
+* [AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview)
 
 ## Support
 
-Product support is available through the following channels:
+Product support is available through following mediums.
+
+* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
+* [Community forum](https://www.syncfusion.com/forums/react-js2?utm_source=npm&utm_campaign=react-form-renderer-npm)
+* [GitHub issues](https://github.com/syncfusion/ej2-react-ui-components/issues/new)
+* [Request feature or report bug](https://www.syncfusion.com/feedback/react?utm_medium=listing&utm_source=github)
+* Live chat
+
+## Changelog
+
+Check the changelog [here](https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/form-renderer/CHANGELOG.md). Get minor improvements and bug fixes every week to stay up to date with frequent updates.
 
-- [Support Ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed response in 24 hours
-- [Community Forum](https://www.syncfusion.com/forums)
+## License and copyright
 
-## License and Copyright
+> This is a commercial product and requires a paid license for possession or use. Syncfusion<sup>®</sup> licensed software, including this component, is subject to the terms and conditions of Syncfusion<sup>®</sup> [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 140+ [React UI components](https://www.syncfusion.com/react-ui-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
 
-> This is a commercial product and requires a paid license for possession or use. Syncfusion's licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for React UI components, you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
+> A free community [license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
 
-> A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
+See [LICENSE FILE](https://github.com/syncfusion/ej2-react-ui-components/blob/master/license) for more info.
 
-© Copyright 2026 Syncfusion®, Inc. All Rights Reserved. The Syncfusion® Essential® Studio license and copyright applies to this distribution.
+© Copyright 2026 Syncfusion<sup>®</sup> Inc. All Rights Reserved. The Syncfusion<sup>®</sup> Essential Studio<sup>®</sup> license and copyright applies to this distribution.

package/diConfig.json

@@ -0,0 +1,85 @@
+{
+  "name": "Form-Renderer",
+  "description": "Form Renderer Component",
+  "keywords": {
+    "common": [
+      "ej2",
+      "syncfusion",
+      "ej2-form-renderer",
+      "form renderer",
+      "form-renderer",
+      "ej2 form renderer",
+      "react form renderer",
+      "typescript form renderer",
+      "form control",
+      "form controls",
+      "input",
+      "json form",
+      "schema form"
+    ],
+    "angular": [
+      "angular",
+      "ng",
+      "ej2-ng-form-renderer",
+      "ng-form-renderer",
+      "angular-form-renderer"
+    ],
+    "react": [
+      "react",
+      "reactjs",
+      "ej2-react-form-renderer",
+      "react-form-renderer",
+      "form-renderer"
+    ],
+    "vue": [
+      "vue",
+      "vuejs",
+      "ej2-vue-form-renderer",
+      "vue-form-renderer"
+    ]
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/syncfusion/ej2-form-renderer"
+  },
+  "eventInterfaces": [
+    "ChangeEventArgs",
+    "SubmitEventArgs",
+    "ButtonClickEventArgs"
+  ],
+  "components": [
+    {
+      "baseClass": "FormRenderer",
+      "directoryName": "form-renderer",
+      "type": "container",
+      "defaultTag": "<div id='formrenderer'></div>",
+      "selector": "[ejs-form-renderer], ejs-form-renderer",
+      "preferredTag": "div",
+      "blazorType": "native",
+      "comment": [
+        "/**",
+        " * Represents the Angular FormRenderer Component.",
+        " * ```html",
+        " * <ejs-form-renderer></ejs-form-renderer>",
+        " * ```",
+        " */"
+      ],
+      "reactComment": [
+        "/**",
+        " * `FormRenderer` represents the React FormRenderer Component.",
+        " * ```ts",
+        " * <FormRendererComponent schema={schema} />",
+        " * ```",
+        " */"
+      ],
+      "vueComment": [
+        "/**",
+        " * Represents the Essential JS 2 VueJS FormRenderer Component",
+        " * ```html",
+        " * <ejs-form-renderer></ejs-form-renderer>",
+        " * ```",
+        " */"
+      ]
+    }
+  ]
+}