# ivoyant-form-builder > Build an antd form from a JSON schema Latest version **4.0.4** (published 2020-11-30) · MIT license · 0 weekly downloads ## Install ```sh npm install ivoyant-form-builder pnpm add ivoyant-form-builder yarn add ivoyant-form-builder bun add ivoyant-form-builder ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 4.0.4 | | Published | 2020-11-30 | | First published | 2020-10-16 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 1 | | Unpacked size | 29.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | jasonpacheco | | Maintainers | jasonpacheco | ## Links - npm: https://www.npmjs.com/package/ivoyant-form-builder - npm.io page: https://npm.io/package/ivoyant-form-builder ## Dependencies (1) - [deepdash-es](https://npm.io/package/deepdash-es.md) ^5.3.2 ## Recent versions - 4.0.4 (latest) — 2020-11-30 - 4.0.3 — 2020-11-30 - 4.0.2 — 2020-11-25 - 4.0.1 — 2020-11-25 - 4.0.0 — 2020-11-25 - 3.0.19 — 2020-11-17 - 3.0.18 — 2020-11-17 - 3.0.17 — 2020-11-17 - 3.0.16 — 2020-11-07 - 3.0.15 — 2020-11-07 - 3.0.14 — 2020-11-05 - 3.0.13 — 2020-11-03 - 3.0.12 — 2020-11-02 - 3.0.11 — 2020-10-28 - 3.0.10 — 2020-10-28 - … 24 more at https://npm.io/package/ivoyant-form-builder/versions ## README ## iVoyant Form Builder Quickly build Ant Design forms with a JSON schema. ### Installation `yarn add ivoyant-form-builder` ### Usage ```jsx import React from 'react'; import ReactDOM from 'react-dom'; import Form from 'ivoyant-form-builder'; import config from './config.json'; ReactDOM.render(
, document.getElementById('root')); ``` In `./config.json` ```json { "schema": { "customerInfo": { "name": "@first @last", "address": "@address" }, "isEligible": "@@age >= 65" }, "meta": [ { "columns": 2, "fields": [ { "key": "first", "label": "First Name", "widgetProps": { "maxLength": 15 } }, { "key": "last", "label": "Last Name" }, { "key": "address", "label": "Home Address" }, { "key": "age", "label": "Select age", "widget": "select", "options": [64, 65, 66] }, "@submitButton" ] } ] } ``` The [antd-form-builder](https://github.com/rekit/antd-form-builder) API drives the creation of antd components managed under a single Form component. In the above example, `meta` is an array of ant-form-builder `meta` objects that operate under the same API as ant-form-builder with some enhancements. \
### `ivoyant-form-builder` specific API In order to solve some of the difficulties of creating dynamic forms with JSON, properties can be accessed with `@` and functions can be parsed inline with the `@@` syntax. | Property | Type | Default Value | Description | | ------------------ | --------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | schema | `object` | - | Collects the values of your fields. [How to use](#collecting-form-values) | | encryptionKey | `string` | - | When an encryption key is provided, it is encrypted with crypto-js a default configuration using AES encryption. | | encryptionMethod | `object` | - | An object with keys `parse` and `options`. `parse` is a string function that will encrypt the collected form values. The function has access to `payload` and the spread keys of `options`. `options` is an object that contains variables that can be accessed by the parsed function. | | overrideEncryption | `boolean` | - | if `true`, encryption will be bypassed even if encryption methods are passed into Form component | | forceUpdate | `boolean` | `false` | This will rerender the form on all state changes. Enable if you aren't getting expected dynamic behavior. | | formProps | `object` | - | Contains props that will get passed to antd `` component | ### Collecting form values In the [example](#example), `schema` is an object that conforms to the shape you want your fields in after form validation/collection. To reference a field value, get its key with the `@` syntax. To run some processing on the field value, create a function and use the field as a variable. Example collected meta keys for a form: ```json { "firstName": "Jane", "lastName": "Doe", "address": "Peachtree St", "city": "Atlanta", "state": "GA" } ``` Example schema ```json { "customerName": "@firstName @lastName", "address": "@address, @city, @state", "livesInCA": "@@state === 'CA'" } ``` parses to: ```json { "customerName": "Jane Doe", "address": "Peachtree St, Atlanta, GA", "livesInCA": false } ``` ### Thorough example ```json { "schema": { "customerData": { "name": "@@useTitle ? `${title}. ${first} ${last}` : `${first} ${last}`", "address": "@address", "email": "@email" }, "preferences": { "subscribe": "@@wantsSubscription", "sendOffers": "@@wantsOffers" } }, "encryptionKey": "abc", "meta": { "columns": 1, "fields": [ { "key": "first", "label": "First Name" }, { "key": "last", "label": "Last Name" }, { "key": "useTitle", "widget": "checkbox", "children": "Prefer title?" }, { "key": "title", "widget": "select", "label": "Select title", "options": ["Mr.", "Ms.", "Mrs.", "Dr."] }, { "key": "address", "label": "Address" }, { "key": "email", "label": "Email" }, { "key": "wantsSubscription", "widget": "checkbox", "children": "Check if you want to subscribe to emails" }, { "key": "wantsOffers", "widget": "checkbox", "children": "Check if you want third party offers" } ] } } ``` ```jsx const customMethod = ({payload}) => { /** * EXAMPLE * payload = { * customerData: { * name: "Mr. Mike W", * address: "123 Anywhere", * email: "email@email.com" * }, * preferences: { * subscribe: false, * wantsOffers: true * } * } **/ // do something with the payload return // encrypted value } React.render() ``` --- _Source: https://npm.io/package/ivoyant-form-builder · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._