{"id":20459908,"url":"https://github.com/rational-kunal/dynamic-form","last_synced_at":"2025-08-03T04:03:57.024Z","repository":{"id":48291071,"uuid":"374288507","full_name":"rational-kunal/dynamic-form","owner":"rational-kunal","description":"Create bootstrap flavoured dynamic forms with ease.","archived":false,"fork":false,"pushed_at":"2021-08-03T03:43:47.000Z","size":1541,"stargazers_count":7,"open_issues_count":10,"forks_count":0,"subscribers_count":1,"default_branch":"develop","last_synced_at":"2025-07-21T15:58:41.800Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://rational-kunal.github.io/dynamic-form/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rational-kunal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-06-06T06:47:09.000Z","updated_at":"2024-02-17T07:04:45.000Z","dependencies_parsed_at":"2022-08-28T02:41:30.193Z","dependency_job_id":null,"html_url":"https://github.com/rational-kunal/dynamic-form","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/rational-kunal/dynamic-form","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rational-kunal%2Fdynamic-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rational-kunal%2Fdynamic-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rational-kunal%2Fdynamic-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rational-kunal%2Fdynamic-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rational-kunal","download_url":"https://codeload.github.com/rational-kunal/dynamic-form/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rational-kunal%2Fdynamic-form/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268492034,"owners_count":24258746,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"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":[],"created_at":"2024-11-15T12:17:43.227Z","updated_at":"2025-08-03T04:03:56.958Z","avatar_url":"https://github.com/rational-kunal.png","language":"JavaScript","readme":"# dynamic-form\n\nStateful forms on the fly.\n\n![npm](https://img.shields.io/npm/v/@rational-kunal/dynamic-form?logo=NPM\u0026style=for-the-badge)\n![GitHub Workflow Status](https://img.shields.io/github/workflow/status/rational-kunal/dynamic-form/Node.js%20CI?logo=GitHub\u0026style=for-the-badge)\n![npm](https://img.shields.io/npm/dt/@rational-kunal/dynamic-form?logo=NPM\u0026style=for-the-badge)\n![GitHub commits since latest release (by date)](https://img.shields.io/github/commits-since/rational-kunal/dynamic-form/latest?style=for-the-badge\u0026logo=Git)\n![Twitter Follow](https://img.shields.io/twitter/follow/rational_kunal?logo=twitter\u0026style=for-the-badge)\n\n## Install\n\n```bash\nnpm i @rational-kunal/dynamic-form\n```\n\n## Usage\n\n`DynamicForm.Form` creates a beautiful form for a given schema. Schemas should be passed through `DynamicForm.schema` to parse it before passing it to the component. See the schemas section to see how to render the different types of complex forms.\n\n```js\nimport DynamicForm from 'dynamic-form'\n\nconst App = () =\u003e {\n  const [value, setValue] = useState({})\n  const schema = DynamicForm.schema({\n    Name: 'John Doe',\n    Age: Number\n  })\n\n  return (\n    \u003cDynamicForm.Form\n      schema={schema}\n      onChange={(newValue) =\u003e setValue(newValue)}\n      onSubmit={(newValue) =\u003e setValue(newValue)}\n    /\u003e\n  )\n}\n```\n\n## `DynamicForm.Form`\n\nThe core component that will render a form for a given schema.\n\n| Props    | Type     | Note                                                                            |\n| -------- | -------- | ------------------------------------------------------------------------------- |\n| Schema   | Object   | Schema object parsed by `DynamicForm.schema`                                    |\n| onChange | Function | Function that will be executed with changed value when value in form is changes |\n| onSubmit | Function | Function that will be executed with final value when submit button is pressed   |\n\n## `DynamicForm.type`\n\nAvailable form types. This will also control how value will be returned through `onChange` and `onSubmit`.\n\nTODO: Update notes with nature of types.\n\n| Form Types | Note                                           |\n| ---------- | ---------------------------------------------- |\n| text       | String form that will return `String` value    |\n| number     | Number form that will return `Number` value    |\n| nested     | Nested form that will return `Object` value    |\n| repeatable | Repeatable form that will return `Array` value |\n\n## `DynamicForm.schema`\n\nThe function parses minimal schema and converts it into an expanded schema that is understandable by `DynamicForm.Form`. \\\nFor minimal schema, the developer given label will be used as a key to store value for the form. For expanded schema, the developer key will be used as a key to store value for the form. \\\nExample of schema:\n\n```js\n// Minimal schema\nconst schema = {\n  Name: 'John Doe'\n}\n\n// Convert minimal, expanded or mixed schema to expanded schema\nlet expandedSchema = DynamicForm.schema(schema)\n\n// expaded schema for given minimal schema will look like this\nexpandedSchema = {\n  Name: {\n    type: 'DynamicFormType.Text',\n    label: 'Name',\n    defaultValue: 'John Doe'\n  }\n}\n```\n\nSee [examples](https://rational-kunal.github.io/dynamic-form) to see schemas is action.\n\n### String schema\n\n```js\n// Use this if you just want to create form on the fly.\nconst stringSchema = {\n  '\u003clabel\u003e': String || '\u003cDefault Value\u003e'\n}\n\n// Fine tune some of the aspects.\nconst stringSchema = {\n  '\u003ckey\u003e': {\n    label: '\u003clabel\u003e',\n    type: DynamicFormType.text,\n    placeholder: '\u003cplaceholder\u003e', // Optional\n    defaultValue: '' // Optional\n  }\n}\n```\n\n### Number schema\n\n```js\n// Use this if you just want to create form on the fly.\nconst numberSchema = {\n  '\u003clabel\u003e': Number || '\u003cDefault Value\u003e'\n}\n\n// Fine tune some of the aspects.\nconst stringSchema = {\n  '\u003ckey\u003e': {\n    label: '\u003clabel\u003e',\n    type: DynamicFormType.number,\n    placeholder: '\u003cplaceholder\u003e', // Optional\n    defaultValue: '' // Optional\n  }\n}\n```\n\n### Nested schema\n\n```js\n// Use this if you just want to create form on the fly.\nconst nestedSchema = {\n  '\u003clabel\u003e': { ... }\n}\n\n// Fine tune some of the aspects.\nconst nestedSchema = {\n  '\u003ckey\u003e': {\n    label: '\u003clabel\u003e',\n    type: DynamicFormType.nested,\n    schema: { ... }\n  }\n}\n```\n\n### Repeated schema\n\n```js\n// Use this if you just want to create form on the fly.\nconst repeatedSchema = {\n  '\u003clabel\u003e': [{ ... }]\n}\n\n// Fine tune some of the aspects.\nconst repeatedSchema = {\n  '\u003ckey\u003e': {\n    type: DynamicFormType.repeatable,\n    schema: { ... }\n  }\n}\n```\n\n## License\n\nMIT © [rational-kunal](https://github.com/rational-kunal)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frational-kunal%2Fdynamic-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frational-kunal%2Fdynamic-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frational-kunal%2Fdynamic-form/lists"}