ultimate-react-form-renderer
v1.9.86
Published
A form renderer for React, compatible with the output of the [`ultimate-react-form-builder`](https://www.npmjs.com/package/ultimate-react-form-builder) Package. Easily manage form fields, field values, and handle save functions, all in TypeScript.
Downloads
660
Maintainers
aliafzaliKeywords
Readme
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-rendererUsage 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 {
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>
);
}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;
}How to use in non react environment?
<!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>