https://github.com/akvo/akvo-react-form-editor
akvo-react-form survey editor
https://github.com/akvo/akvo-react-form-editor
Last synced: 5 months ago
JSON representation
akvo-react-form survey editor
- Host: GitHub
- URL: https://github.com/akvo/akvo-react-form-editor
- Owner: akvo
- License: agpl-3.0
- Created: 2022-08-25T03:53:51.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-12-11T06:40:11.000Z (about 1 year ago)
- Last Synced: 2025-08-17T11:24:58.609Z (5 months ago)
- Language: JavaScript
- Homepage: https://akvo.github.io/akvo-react-form-editor/
- Size: 34.2 MB
- Stars: 0
- Watchers: 5
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# akvo-react-form-editor
Survey Editor for generating **[Akvo React Form](https://www.npmjs.com/package/akvo-react-form)** survey definition. [View Demo](https://akvo.github.io/akvo-react-form-editor/)
[](https://akvo.semaphoreci.com/projects/akvo-react-form-editor) [](https://img.shields.io/github/repo-size/akvo/akvo-react-form-editor) [](https://GitHub.com/akvo/akvo-react-form-editor/releases/) [](https://www.npmjs.com/package/akvo-react-form-editor) [](https://standardjs.com) [](https://github.com/akvo/akvo-react-form-editor/blob/main/LICENSE) [](https://akvo-react-form-editor.readthedocs.io/en/latest/?badge=latest)
## Install
#### Using NPM
```bash
npm install --save akvo-react-form-editor
```
#### Using Yarn
```bash
yarn add akvo-react-form-editor
```
## Supported Question Type
| Type | Value |
| ----------------------------- | --------------- |
| **Input Text** | input |
| **Input Number** | number |
| **Cascade Select** | cascade |
| **TextArea** | text |
| **Date** | date |
| **Option** | option |
| **Multiple Option** | multiple_option |
| **Tree Select** | tree |
| **Geolocation** | geo |
| **Table (Multiple Question)** | table |
| **Autofield (fn string)** | autofield |
## Usage
```jsx
import React from 'react';
import 'akvo-react-form-editor/dist/index.css'; /* REQUIRED */
import WebformEditor from 'akvo-react-form-editor';
const Example = () => {
const onSave = (values) => {
console.log(values)
}
render() {
return ;
}
}
```
## API
### WebformEditor
| Props | Description | Type | Default |
| --------------------- | ------------------------------------------------------------------------- | -------------------------------------------------------------------- | ------- |
| **onSave** | Trigger after save button click | `function(values)` | - |
| **limitQuestionType** | Support to limit question type available | Array[[QuestionType](#supported-question-type)] \| `undefined` | - |
| **defaultQuestion** | Support to set custom default new question type, name and required status | Object{[defaultQuestion](#default-question-optional)} \| `undefined` | - |
| **initialValue** | Set value by Form initialization (**Required** as empty object) | Object{[initialValue](#initial-value-optional)} \| `{}` | - |
| **settingCascadeURL** | Value for Select Option on cascade question type | Array[[settingCascadeURL](#setting-cascade-url)] \| `undefined` | - |
| **settingHintURL** | Value for Hint / Validate question setting | Object{[settingHintURL](#setting-hint-url)} \| `undefined` | - |
| **customParams** | Custom Parameters | Object{[customParams](#custom-params)} \| `undefined` |
## Properties
### Default Question (optional)
Default question should be defined as object.
| Props | Description | Type |
| ------------ | -------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
| **type** | Use one of [QuestionType](#supported-question-type) as default new question type | `number` \| `input` \| `text` \| `option` \| `multiple_option` \| `cascade` \| `tree` \| `geo` |
| **name** | Set default new question title / name | String |
| **required** | Set new question required `true`/`false` by default | Boolean |
Example:
```jsx
```
### Setting Cascade URL
Setting cascade URL should be defined as array of object. This value was used to fill Select Option value for cascade question type.
| Props | Description | Type |
| ------------ | ------------------------- | -------------------------------------------------------------------- |
| **id** | Unique id as option value | Integer |
| **name** | Shown as option label | String |
| **endpoint** | Cascade API | String |
| **initial** | Initial Parameter | Integer \| String \| `undefined` |
| **list** | Object name of array | `res.data?.[list]` \| `res.data` \| String \| `undefined` \| `false` |
Example:
```jsx
```
### Setting Hint URL
Setting Hint URL should be defined as array of object. This value was used to fill Select Option value for hint setting in a question.
Example:
```jsx
```
#### Setting Hint URL Object
| Props | Description | Type |
| ----------------- | -------------------------------------------------- | -------------------------------------------------------------- |
| **questionTypes** | Value to limit hint setting for a certain question | Array[[QuestionType](#supported-question-type)] \| `undefined` |
| **settings** | Value for hint options | Array[[Settings Parameters](#settings-parameters)] |
#### Settings Parameters
| Props | Description | Type |
| ------------ | ----------------------------------------------------------------------------------------------- | ------------------------------------------ |
| **id** | Unique id as option value | Integer |
| **name** | Shown as option label | String |
| **endpoint** | Hint API | String |
| **path** | Hint of object path provided by API which containt the value will be shown as a hint/validation | Array[[Path Parameters](#path-parameters)] |
#### Path Parameters
| Props | Description | Type |
| --------- | -------------------------- | ------ |
| **label** | Label for the path options | String |
| **value** | Value for the path options | String |
### Initial Value (optional)
Webform initial value use the same format as [Akvo React Form form structure](https://github.com/akvo/akvo-react-form#example-form-structure). This value was used to load a form into Akvo React Form Editor to update that form definition.
Example: [Initial Value Example](https://github.com/akvo/akvo-react-form-editor/blob/main/example/src/example-initial-value.json)
[](https://www.npmjs.com/package/akvo-react-form) [](https://www.npmjs.com/package/antd)
### Custom Params
Custom parameters are key-value pairs that we can implement in the Webform Editor.
Example:
```jsx
```
#### Custom Parameters Setting
| Props | Description | Type |
| ---------- | ------------------------------- | ---------------------------------------------- |
| **label** | Label for the custom params tab | String \| `undefined` |
| **params** | List of custom parameters | Array[[Custom Parameters](#custom-parameters)] |
#### Custom Parameters
| Props | Description | Type |
| ------------ | ----------------------- | ------------------------------------------------------------- |
| **name** | Parameter name | String |
| **label** | Parameter label | String \| `undefined` |
| **type** | Field Type | `option` \| `input` \| `number` |
| **multiple** | Whether multiple or not | Boolean |
| **options** | Parameter Options | Array[[Option Parameters](#option-parameters)] \| `undefined` |
#### Option Parameters
| Props | Description | Type |
| --------- | ---------------------------- | --------------------- |
| **label** | Label for the params options | String \| `undefined` |
| **value** | Value for the params options | String |
## License
AGPL-3.0 © [akvo](https://github.com/akvo)