Ultimate React Form Renderer

A form renderer for React, compatible with the output of the ultimate-react-form-builder Package. Easily manage form fields, field values, and handle save functions, all in TypeScript.

Installation

Install the package using npm:

npm install ultimate-react-form-renderer

Usage Example

import React, {useState} from 'react';
import TreeRenderer, {TreeRenderer_Helper, TreeRenderer_Models} from 'ultimate-react-form-renderer';

export default function ContactUsPage(props: {data: string}) {
  // props.data is output from ultimate-react-form-builder
  const [field_values, set_field_values] = useState<TreeRenderer_Models.request_data_object[]>([]);
  const [saving, set_saving] = useState<boolean>(false);
  const [req_sent, set_req_sent] = useState<boolean>(false);

  const handle_save = async () => {
    set_saving(true);
    try {
      //check if field_values are valid
      if (!TreeRenderer_Helper.are_field_values_valid(props.data, field_values))
        throw new Error('لطفا مقادیر پر شده را بررسی کنید');
      // Save form data in database
    } catch (e: any) {
      // Handle error
    }
    set_saving(false);
  };

  return (
    <div>
      <TreeRenderer
        data={props.data} // data is output from ultimate-react-form-builder
        field_values={field_values}
        set_field_values={set_field_values}
        handle_save={handle_save}
        saving={saving}
      />
    </div>
  );
}

Props

| Prop Name | Type | Required | Description | | ------------------------- | ------------------------------------------------------------- | -------- | -------------------------------------------------------------------------------- | | data | string | true | JSON string of the form structure, typically from ultimate-react-form-builder. | | field_values | request_data_object[] | false | Current state of the form field values. | | set_field_values | React.Dispatch<React.SetStateAction<request_data_object[]>> | false | Function to update the state of field_values. | | handle_save | () => Promise<void> | false | Function triggered when the form is submitted. | | saving | boolean | false | Controls the loading state during form submission. | | handle_uploadMediaFile | (formData: FormData) => Promise<any> | false | Handle file uploads inside the form. | | outSide_fields_settings | TreeRenderer_Models.fields_settings_model | false | Customize field suffixes and prefixes. | | disable_security | boolean | false | Disable security features like dangerouslySetInnerHTML. |

request_data_object model

interface request_data_object {
  field_id: string;
  field_en_key: string;
  field_fa_key: string;
  field_value: string;
  field_type: string;
  field_label?: string;
}