# configurable-form-builder > Build React based form via configuration file Latest version **2.0.1** (published 2019-11-07) · ISC license · 0 weekly downloads ## Install ```sh npm install configurable-form-builder pnpm add configurable-form-builder yarn add configurable-form-builder bun add configurable-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 | 2.0.1 | | Published | 2019-11-07 | | First published | 2019-07-05 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 5 | | Unpacked size | 114.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Tri4Ty | | Maintainers | stormuicomponents | | Keywords | React, Dynamic Form, Configurable Form | ## Links - npm: https://www.npmjs.com/package/configurable-form-builder - Repository: https://github.com/Tri4Ty/configurable-form-builder - Homepage: https://github.com/Tri4Ty/configurable-form-builder#readme - Issues: https://github.com/Tri4Ty/configurable-form-builder/issues - npm.io page: https://npm.io/package/configurable-form-builder ## Dependencies (5) - [react](https://npm.io/package/react.md) ^16.8.6 - [react-dom](https://npm.io/package/react-dom.md) ^16.8.6 - [prop-types](https://npm.io/package/prop-types.md) ^15.7.2 - [@css-modules-theme/react](https://npm.io/package/@css-modules-theme/react.md) ^2.2.0 - [react-responsive-masonry](https://npm.io/package/react-responsive-masonry.md) ^2.0.0 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 2.0.1 (latest) — 2019-11-07 - 2.0.0 — 2019-11-07 - 1.4.1 — 2019-07-12 - 1.4.0 — 2019-07-12 - 1.3.0 — 2019-07-10 - 1.2.0 — 2019-07-10 - 1.1.0 — 2019-07-09 - 1.0.0 — 2019-07-05 ## README # Configurable Form Builder ## Overview The Configurable Form Builder allows the creation of a React based forms via a JSON configuration file. ## Installation Run the following NPM command to install: ``` > npm install --save configurable-form-builder ```` Run the following NPM command to launch a sample demo: ``` > npm start ``` ## Usage The Configurable Form Builder can be used as follows: ``` import ConfigurableForm from 'configurable-form-builder'; ... primaryCallback = (submittedFormValueMap) => { [do some logic with submitted form attribute value pairs] } ... ``` in order to generate the following: ![Sample Form Screenshot](/screenshot.png) If no 'title' property is configured, there will be no title displayed. ### Responsiveness By default the form shall display all of it's attribute files in a single column. It is possible to spread the form fields out over multiple columns while keeping it responsive to varying screen sizes. By using the 'breakpoints' property, the form can be configured to spread it's content over a number of columns (order is dictated by the order of the 'fields' property). Example: The following properties setting will render all fields in a single column when the form is 350px, 2 columns when 750px wide and 3 columns when 900px or more breakpoints: {350: 1, 750: 2, 900: 3} ![Form width larger than 900px](/screenshot_3columns.png) ![Form width larger than 750px](/screenshot_2columns.png) ![Form width less than 350px](/screenshot_1column.png) ### Configuration Properties ``` ConfigurableForm.propTypes = { title: PropTypes.string, fields: PropTypes.arrayOf( PropTypes.shape({ id: PropTypes.string.isRequired, type: PropTypes.string.isRequired, label: PropTypes.string, values: PropTypes.arrayOf(PropTypes.string) }) ), values: PropTypes.object, primaryButtonText: PropTypes.string, primaryButtonCallback: PropTypes.func.isRequired, noAttrText: PropTypes.string, breakpoints: PropTypes.object } ConfigurableForm.defaultProps = { fields: [], primaryButtonText: PRIMARY_BUTTON_DEFAULT_TEXT, noAttrText: NO_FORM_ATTRIBUTES, breakpoints: {} } ``` Form properties: Property Name | Type | Required | Description | Default ------------- | ---- | -------- | ----------- | ------- title | String | No | Optional title to display above the form | N/A fields | Array | No | a list of form fields to be rendered | [] values | Object | No | an object mapping the value set for each attribute | N/A primaryButtonText | String | No | Optional text to display in the primary form button | "Submit" primaryButtonCallback | Function | Yes | The callback method when the form is submitted | N/A noAttrText | String | No | Text to display when there are no attribute fileds for the form to render | "No available attributes" breakpoints | Object | No | Configurable breakpoints to make the form responsive | {} Field Properties: Property Name | Type | Required | Description ------------- | ---- | -------- | ----------- id | String | Yes | the unique identifier of the form field type | String | Yes | the type of the form field label | String | No | Optional text to display as the form field label values | Array | No | optional list of values for ENUM type fields Valid Field Property Types: Type | Rendered Component ---- | ------------------ ENUM | Dropdown Anything Else | Textfield --- _Source: https://npm.io/package/configurable-form-builder · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._