@arudovwen/form-builder-react 1.4.43 → 1.4.45
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +41 -23
- package/dist/form-builder.es.js +2471 -2415
- package/dist/form-builder.umd.js +19 -19
- package/dist/index.css +1 -1
- package/package.json +9 -2
- package/types/components/CutomDatePicker.d.ts +1 -0
- package/types/components/editor/form-preview.d.ts +4 -0
- package/types/components/viewer/elements-render.d.ts +4 -1
- package/types/context/editor-context.d.ts +2 -0
package/README.md
CHANGED
|
@@ -39,7 +39,7 @@ Here’s a quick example of how to use the Form Builder Package:
|
|
|
39
39
|
```tsx
|
|
40
40
|
import React, { useState, useEffect } from "react";
|
|
41
41
|
import { FormBuilder, FormViewer } from "@arudovwen/form-builder-react";
|
|
42
|
-
import
|
|
42
|
+
import '@arudovwen/form-builder-react/style.css';
|
|
43
43
|
|
|
44
44
|
function App() {
|
|
45
45
|
const [formData, setFormData] = useState(null);
|
|
@@ -72,6 +72,7 @@ function App() {
|
|
|
72
72
|
onSubmit={(form_data: any) => console.log(form_data)}
|
|
73
73
|
config={config}
|
|
74
74
|
title="My Form Title"
|
|
75
|
+
questionData={formData} // Pass in existing configuration
|
|
75
76
|
/>
|
|
76
77
|
<FormViewer
|
|
77
78
|
onSubmit={(e: any) => console.log(e)}
|
|
@@ -89,32 +90,49 @@ export default App;
|
|
|
89
90
|
|
|
90
91
|
### Props for `FormBuilder`
|
|
91
92
|
|
|
92
|
-
| Prop
|
|
93
|
-
|
|
|
94
|
-
| `title`
|
|
95
|
-
| `
|
|
96
|
-
| `
|
|
97
|
-
| `
|
|
98
|
-
| `
|
|
99
|
-
| `loading`
|
|
100
|
-
| `
|
|
101
|
-
| `
|
|
102
|
-
| `
|
|
103
|
-
| `
|
|
104
|
-
| `
|
|
105
|
-
| `
|
|
106
|
-
| `
|
|
93
|
+
| Prop | Type | Description |
|
|
94
|
+
| ---- | ---- | ----------- |
|
|
95
|
+
| `title` | `string` | Title of the form (optional). |
|
|
96
|
+
| `questionData` | `FormElement[]` | Array of form elements to render initially in the builder. |
|
|
97
|
+
| `config` | `object` | Configuration object (e.g., `buttonColor`, `loaderColor`). |
|
|
98
|
+
| `onSubmit` | `(data: any) => void` | Callback function triggered when the save button is clicked. |
|
|
99
|
+
| `isReadOnly` | `boolean` | Determines if the builder is rendered in read-only mode. |
|
|
100
|
+
| `loading` | `boolean` | Indicates whether the component is in a loading state. |
|
|
101
|
+
| `goBackUrl` | `() => void` | Function triggered by a back button to navigate somewhere locally. |
|
|
102
|
+
| `onPublish` | `(data: any) => void` | Callback function triggered when the publish button is clicked. |
|
|
103
|
+
| `previewLoading` | `boolean` | Shows loading icon on the preview button. |
|
|
104
|
+
| `saveLoading` | `boolean` | Shows loading icon on the save button. |
|
|
105
|
+
| `publishLoading` | `boolean` | Shows loading icon on the publish button. |
|
|
106
|
+
| `onTitleChange` | `(newTitle: string) => void` | Callback function triggered when the form title is renamed. |
|
|
107
|
+
| `uploadUrl` | `string` | Base URL used for uploading files inside the builder/viewer. |
|
|
108
|
+
|
|
109
|
+
### Props for `FormViewer`
|
|
110
|
+
|
|
111
|
+
| Prop | Type | Description |
|
|
112
|
+
| ---- | ---- | ----------- |
|
|
113
|
+
| `form_data` | `FormElement[]` | Array of form elements to render for the user to complete. |
|
|
114
|
+
| `answerData` | `any` | Initial answers/state for the form elements. |
|
|
115
|
+
| `config` | `object` | Configuration object (e.g., `buttonColor`, `loaderColor`). |
|
|
116
|
+
| `onSubmit` | `(data: any) => void` | Callback function triggered when the form viewer is submitted. |
|
|
117
|
+
| `ignoreValidation` | `boolean` | Whether form validation rules should be bypassed or enforced. |
|
|
118
|
+
| `isReadOnly` | `boolean` | Determines if the viewer is read-only (fields cannot be interacted with). |
|
|
119
|
+
| `loading` | `boolean` | Indicates whether the form viewer is in a loading state. |
|
|
120
|
+
| `renderType` | `'single' \| 'multi'` | Determines how the form renders (single page or multi-step pages). |
|
|
121
|
+
| `children` | `React.ReactNode` | Children to append inside the form wrapper. |
|
|
122
|
+
| `hideFooter` | `boolean` | Hides the default Submit actions footers when set to true. |
|
|
123
|
+
| `onGetValues` | `(data: any) => void` | Callback triggered to fetch form values dynamically as they change. |
|
|
124
|
+
| `uploadUrl` | `string` | Base URL used for uploading files. |
|
|
107
125
|
|
|
108
126
|
### Form Element Types
|
|
109
127
|
|
|
110
|
-
The `FormElement` type supports the following fields:
|
|
128
|
+
The `FormElement` type supports the following core fields:
|
|
111
129
|
|
|
112
|
-
| Field
|
|
113
|
-
|
|
|
114
|
-
| `id`
|
|
115
|
-
| `type`
|
|
116
|
-
| `label`
|
|
117
|
-
| `placeholder` | `string` | Placeholder text for the input.
|
|
130
|
+
| Field | Type | Description |
|
|
131
|
+
| ----- | ---- | ----------- |
|
|
132
|
+
| `id` | `string` | Unique identifier for the form element. |
|
|
133
|
+
| `type` | `string` | Type of the input (e.g., `text`, `email`, `select`). |
|
|
134
|
+
| `label` | `string` | Label for the form element seen in the sidebar. |
|
|
135
|
+
| `placeholder` | `string` | Placeholder text for the input. |
|
|
118
136
|
|
|
119
137
|
## Development
|
|
120
138
|
|