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.
Install the package using npm:
npm install ultimate-react-form-rendererimport 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 {
const result = TreeRenderer_Helper.are_field_values_valid(props.data, field_values);
//check if field_values are valid
if (!result.status) throw new Error(result.message);
// 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>
);
}| 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. |
interface request_data_object {
field_id: string;
field_en_key: string;
field_fa_key: string;
field_value: string;
field_type: string;
field_label?: string;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React Package Test</title>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/ultimate-react-form-renderer/dist/ultimate-react-form-renderer.umd.js"></script>
</head>
<body>
<div id="root">root</div>
<script>
const props = {
data: '',
};
const FormRenderer = UltimateReactFormRenderer.TreeRenderer;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(FormRenderer, props));
</script>
</body>
</html>