{"id":23968888,"url":"https://github.com/heshanera/react-form-build","last_synced_at":"2026-06-15T08:31:19.768Z","repository":{"id":65147107,"uuid":"583570691","full_name":"heshanera/react-form-build","owner":"heshanera","description":"Dynamic form creation module implemented using react. Can generate forms and interact with the generated from with view and edit modes. Allows adding custom elements.","archived":false,"fork":false,"pushed_at":"2023-01-18T09:56:41.000Z","size":7618,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-12T00:57:54.753Z","etag":null,"topics":["custom-elements","custom-forms","form","form-builder","form-creator","react","reactjs","responsive-form"],"latest_commit_sha":null,"homepage":"https://heshanera.github.io/react-form-build","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/heshanera.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-12-30T07:17:20.000Z","updated_at":"2023-01-31T22:52:00.000Z","dependencies_parsed_at":"2023-02-10T14:16:32.020Z","dependency_job_id":null,"html_url":"https://github.com/heshanera/react-form-build","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/heshanera/react-form-build","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heshanera%2Freact-form-build","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heshanera%2Freact-form-build/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heshanera%2Freact-form-build/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heshanera%2Freact-form-build/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/heshanera","download_url":"https://codeload.github.com/heshanera/react-form-build/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heshanera%2Freact-form-build/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34355157,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-15T02:00:07.085Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["custom-elements","custom-forms","form","form-builder","form-creator","react","reactjs","responsive-form"],"created_at":"2025-01-07T00:55:28.156Z","updated_at":"2026-06-15T08:31:19.751Z","avatar_url":"https://github.com/heshanera.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-form-build\n\n[![React](https://img.shields.io/badge/React-v18.2.0-%2361DBFB)](https://github.com/heshanera/react-form-build) \u0026nbsp;\n[![NPM](https://img.shields.io/badge/NPM-v8.19.2-%23CC3534)](https://github.com/heshanera/react-form-build)\u0026nbsp;\n[![Node](https://img.shields.io/badge/Node-v18.11.0-%233C873A)](https://github.com/heshanera/react-form-build)\u0026nbsp;\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue)](https://github.com/heshanera/react-form-build/blob/master/LICENSE)\u0026nbsp;\n\nDynamic form creation module implemented using react. Can generate forms and interact with the generated from with view and edit modes. Layout generator has build in field element types and allows adding custom elements.\n\n- Demo: [Storybook](https://heshanera.github.io/react-form-build) \u003cbr /\u003e\n- NPM: [react-form-build](https://www.npmjs.com/package/react-form-build)\n\n## Modes\n\n\u003cdiv style={{ display: 'flex', justifyContent: 'space-between' }}\u003e\n  \u003cimg src=\"https://github.com/heshanera/assets/blob/master/react-form-build/layoutEditMode.png\" alt=\"Layout Edit\" width=\"33%\"\u003e\n  \u003cimg src=\"https://github.com/heshanera/assets/blob/master/react-form-build/editMode.png\" alt=\"Form Edit\" width=\"33%\"\u003e\n  \u003cimg src=\"https://github.com/heshanera/assets/blob/master/react-form-build/viewMode.png\" alt=\"Form View\" width=\"33%\"\u003e\n\u003c/div\u003e\n\n## Usage\n```bash\nnpm i react-form-build\n```\n\n```js\nimport { FormGenerator, FormStates } from 'react-form-build';\nimport 'react-form-build/dist/style.css';\n\nconst FormGenerator = () =\u003e {\n  const [form, setFormLayout] = useState([]);\n  const [value, setValue] = useState({});\n\n  return (\n    \u003cdiv\u003e\n      \u003cFormGenerator\n        formState={FormStates.LAYOUT_EDIT}\n        value={value}\n        setValue={setValue}\n        layout={form}\n        setLayout={setFormLayout}\n        allowDefaults\n        customFieldTypes={[]}\n      /\u003e\n    \u003c/div\u003e;\n  )\n}\n```\n\n\u003cbr/\u003e\n\n## Component Props\n\n| Prop             | Type       | Description                                                                                                                                                                                             |\n| :--------------- | :--------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| formState        | `string`   | State of the form component. This can be layout editable, form editable or form view. \u003cbr /\u003e \u003ccode\u003eLAYOUT_EDIT \\| FORM_EDIT \\| FORM_VIEW\u003c/code\u003e                                                         |\n| layout           | `array[]`  | Structure of the form. This is an array of arrays. Each array in the layout structure represent a row and the inner array has objects which has each column data. \u003ccode\u003e[[{}, {}], [{}, {}, {}]]\u003c/code\u003e |\n| setLayout        | `func`     | Method to update the form structure when the form layout is updated. Takes the updated layout as the argument                                                                                           |\n| allowDefaults    | `bool`     | To allow or to hide the inbuild field element types                                                                                                                                                     |\n| customFieldTypes | `array`    | List of [custom elements](https://github.com/heshanera/react-form-generator/blob/master/src/stories/assets/NumberInput.jsx). These elements will be available in the layout generation once added       |\n| value            | `object`   | Object with key value pairs which has the form data. \u003ccode\u003eKey: Field Id\u003c/code\u003e \u003ccode\u003eValue: Value\u003c/code\u003e                                                                                               |\n| setValue         | `function` | Method to update the form field values. Takes the updated field values object as the argument                                                                                                           |\n\n\u003cbr/\u003e\n\n## Custom Field Element\n\nCustom field elements can be passed to the component to be available in the form generation.\u003cbr/\u003e\nSample Element: [Number Input](https://github.com/heshanera/react-form-generator/blob/master/src/stories/assets/NumberInput.jsx)\n| Prop | Type | Description |\n| :---------- | :----------- | :----------- |\n| type | `string` | Key to uniquely idenitify the element |\n| displayName | `string` | Display name for the field |\n| Control | `React Component` | Rendering logic for the field component |\n| FieldPropertiesControl | `React Component` | Rendering logic for the field select view |\n\u003cbr/\u003e\n\n## Running Locally with Storybook\n\n```bash\nnpm install\nnpm run storybook\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheshanera%2Freact-form-build","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fheshanera%2Freact-form-build","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheshanera%2Freact-form-build/lists"}