# Ultimate React Form Builder `ultimate-react-form-builder` is a React component designed to simplify the creation of complex forms by providing a drag-and-drop interface for building and managing form structures. To render the form for the client_user, you need to use [`ultimate-react-form-renderer`](https://www.npmjs.com/package/ultimate-react-form-renderer) Package. ## Demo Check out a live demo of the form builder: [Ultimate React Form Builder Demo](https://ultimate-react-form-builder-demo.s3-website.ir-thr-at1.arvanstorage.ir/) ![Demo Screenshot](https://ultimate-react-form-builder-demo.s3-website.ir-thr-at1.arvanstorage.ir/Screenshot.png) ## Installation To install the package, use npm or yarn: ```bash npm install ultimate-react-form-builder ``` or ```bash yarn add ultimate-react-form-builder ``` ## Usage Here's a basic example of how to use the `PageBuilder` component in your application: ```tsx import React from 'react'; import PageBuilder from 'ultimate-react-form-builder'; function App() { return ( console.log(tree)} data={null} show_alert={true} console_log={false} /> ); } export default App; ``` ### Props | Prop | Type | Required | Description | | ---------------- | ----------------------------- | -------- | -------------------------------------------------------------------------------- | | `handel_save_fn` | `(tree: node_model) => any` | Yes | Callback function to handle the saved form tree | | `data` | `string \| null \| undefined` | No | Pre-existing data to populate the form (must be a JSON stringified `node_model`) | | `show_alert` | `boolean` | No | If `true`, enables alert popups for debugging | | `console_log` | `boolean` | No | If `true`, logs output to the console for debugging | ### `handel_save_fn` The `handel_save_fn` prop is a required function that will be called when the form is saved. The function receives the form structure (`tree`) as its argument. You can use this to manage the form data, such as sending it to an API or storing it in state. ### `data` The `data` prop allows you to load an existing form structure into the `PageBuilder`. The data should be a JSON stringified representation of the `node_model`. This is optional and defaults to `null`. ### `show_alert` If `show_alert` is set to `true`, the component will show alerts for debugging purposes. This is useful when building forms to track behavior in real time. ### `console_log` When `console_log` is `true`, the component will log form-building actions to the browser console for debugging purposes. This is helpful during development to track what's happening internally. ## How to use in non react environment? ```html React Package Test
root
```