{"id":14957104,"url":"https://github.com/gkhan205/formify-react","last_synced_at":"2025-05-02T07:33:17.311Z","repository":{"id":53183651,"uuid":"288004326","full_name":"gkhan205/formify-react","owner":"gkhan205","description":"React Form, which generates, validates, and populates data considering your API requirement. Just send an Array Model to the form and let it handle everything for you.","archived":false,"fork":false,"pushed_at":"2023-05-26T20:49:47.000Z","size":800,"stargazers_count":14,"open_issues_count":2,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-29T23:07:26.181Z","etag":null,"topics":["dynamic-forms","form","hacktoberfest","react","react-component","react-form","react-form-component","react-form-validation","react-forms","react-formsy","react-js","reactjs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/formify-react","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/gkhan205.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["https://www.paypal.me/codewithghazi"]}},"created_at":"2020-08-16T18:45:13.000Z","updated_at":"2024-10-10T14:19:58.000Z","dependencies_parsed_at":"2022-09-05T13:00:30.788Z","dependency_job_id":null,"html_url":"https://github.com/gkhan205/formify-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gkhan205%2Fformify-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gkhan205%2Fformify-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gkhan205%2Fformify-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gkhan205%2Fformify-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gkhan205","download_url":"https://codeload.github.com/gkhan205/formify-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224305842,"owners_count":17289446,"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","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":["dynamic-forms","form","hacktoberfest","react","react-component","react-form","react-form-component","react-form-validation","react-forms","react-formsy","react-js","reactjs"],"created_at":"2024-09-24T13:14:05.303Z","updated_at":"2024-11-12T16:04:55.189Z","avatar_url":"https://github.com/gkhan205.png","language":"JavaScript","readme":"# formify-react\n\n\u003e Last form component you will need for you application which works with only a JSON you pass rest it will handle everything\n\n[![NPM](https://img.shields.io/npm/v/formify-react.svg)](https://www.npmjs.com/package/formify-react) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) [![License](https://img.shields.io/npm/l/formify-react)](https://github.com/gkhan205/formify-react/blob/master/LICENSE) [![Bundle Size](https://img.shields.io/bundlephobia/min/formify-react)](https://www.npmjs.com/package/formify-react)\n\n[Installation](#Install) \\\n[Usage](#Usage) \\\n[Props](#Props) \\\n[Example Form Field](#Model) \\\n[Form Fields](#Fields) \\\n[Supported Input Fields](#Supported) \\\n[Validators](#Validators) \\\n[Upcoming](#Upcoming) \\\n[Contributing](#Contribution)\n\n[![Edit formify-react](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/formify-react-v9pkv?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n## Install\n\n```bash\n#npm\nnpm i -S formify-react\n\n#yarn\nyarn add formify-react\n```\n\n## Usage\n\n```jsx\nimport React, { Component, createRef } from 'react'\n\nimport Form from 'formify-react'\nimport 'formify-react/dist/index.css'\n\nimport { formConstants } from './config'\n\nconst budgetData = [\n  { value: 5000, label: '$5000' },\n  { value: 15000, label: '$15000' },\n  { value: 25000, label: '$25000' },\n  { value: 35000, label: '$35000' },\n  { value: 50000, label: '$50000' }\n]\n\nclass Example extends Component {\n  formRef = createRef()\n\n  handleSave = () =\u003e {\n    const { current } = this.formRef\n    const form = current.getFormData()\n    if (form.isFormValid) {\n      console.log(form.formData)\n    }\n  }\n\n  handleSubmit = ({ formData, isFormValid }) =\u003e {\n    if (isFormValid) {\n      console.log(formData)\n    }\n  }\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cForm\n          model={formConstants}\n          ref={this.formRef}\n          data={{ budget: budgetData }}\n          onSubmit={this.handleSubmit}\n        /\u003e\n        \u003cbutton onClick={this.handleSave}\u003eSave\u003c/button\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n```\n\n\u003e `getFormData()` returns an object of {isFormValid, formData}. Same object will be returned if you use `onChange` function to get latest change while you update any field. `getFormData` is only be accessible when you use ref.\n\n\u003e New Update:- Now you can pass onSubmit callback function to enable native form submit (with pressing enter);\n\n## Props\n\n| Property | Description                                                                                              | Type      | Default | Required |\n| -------- | -------------------------------------------------------------------------------------------------------- | --------- | ------- | -------- |\n| model    | Form model array with all fields                                                                         | Array     |         | Yes      |\n| ref      | Ref to get access to Form DOM Ref                                                                        | React Ref |         | No       |\n| data     | Object of dropdown data with field name of dropdown field                                                | Object    | {}      | No       |\n| values   | Object of all fields in forms with values to be populated in form                                        | Object    | {}      | No       |\n| onChange | This is an optional callback if you need to get form values when an input is changed                     | Function  |         | No       |\n| onSubmit | This is an optional callback if you need to get form values when pressed enter to submit to your service | Function  |         | No       |\n\n## Model\n\n```js\nimport { Validators } from 'formify-react'\n\nexport const formConstants = [\n  {\n    field: 'email',\n    type: 'email',\n    validators: [\n      { check: Validators.required, message: 'Email is mandatory' },\n      { check: Validators.email, message: 'Email entered is not valid' }\n    ],\n    required: true,\n    title: 'Email',\n    placeholder: 'Enter your email',\n    styleClass: 'col-sm-6',\n    extraProps: {\n      maxLength: 30\n    }\n  },\n  {\n    field: 'budget',\n    type: 'dropdown',\n    validators: [],\n    required: false,\n    title: 'Your Budget',\n    styleClass: 'col-sm-6'\n  },\n  {\n    field: 'message',\n    type: 'textarea',\n    validators: [],\n    required: false,\n    title: 'Message',\n    placeholder: 'Enter your message',\n    styleClass: 'col-sm-12'\n  },\n  {\n    field: 'notify',\n    type: 'checkbox',\n    validators: [],\n    required: false,\n    title: 'Subscribe to our mailing list',\n    styleClass: 'col-sm-12'\n  }\n]\n```\n\n## Fields\n\n| Property    | Description                                                                                                                                     | Type                                                                                                   | Default | Required |\n| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ------- | -------- |\n| field       | This property will be used to identify the input and this will be returned with value which can be used to everywhere. e.g: sending to API Body | string                                                                                                 |         | Yes      |\n| type        | Type of input field to generated in Form                                                                                                        | Input Type ['input','textarea','dropdown', 'checkbox', 'email', 'url', 'search', 'number', 'password'] |         | Yes      |\n| validators  | Array of validator functions imported from react-dynamic-form                                                                                   | Function                                                                                               | []      | Yes      |\n| required    | This field is responsible to mark the field required in form                                                                                    | Boolean                                                                                                | false   | Yes      |\n| title       | This field used to display label of the Input Field                                                                                             | String                                                                                                 | ''      | Yes      |\n| styleClass  | This field used to do the layout of the fields, you can use your style classes to style inputs                                                  | String                                                                                                 | ''      | No       |\n| placeholder | This field used to display placeholder in the field                                                                                             | String                                                                                                 | ''      | No       |\n| extraProps  | This field is used to send any extra html attributes to field                                                                                   | Object                                                                                                 | {}      | No       |\n\n\u003e For Dropdown Data format should be an array of {value:'', label:'',}\n\n## Supported\n\n| Input    | Value      | Sample Data                   |\n| -------- | ---------- | ----------------------------- |\n| Text     | `text`     |                               |\n| Email    | `email`    |                               |\n| Password | `password` |                               |\n| URL      | `url`      |                               |\n| Search   | `search`   |                               |\n| Number   | `number`   |                               |\n| Dropdown | `dropdown` | {value:'test', label:'Test',} |\n| Checkbox | `checkbox` |                               |\n| Date     | `date`     |                               |\n\n\u003e These values will be used in type field of form model\n\n## Validators\n\n`import { Validators } from 'formify-react'`\n\n- {check: Validators.required, message: 'This field is required'}\n- {check: Validators.email, message: 'Email is invalid'}\n- {check: Validators.number, message: 'Only number allowed'}\n\n\u003e You can now send custom validator to the form component\n\n```js\n/*\n  Custom Validator\n  @params: value -\u003e received value from inputs\n  @params: message -\u003e message which you will add while sending in the validators array of form component\n*/\nconst checkGhazi = (value, message) =\u003e {\n  if(value \u0026\u0026 value.includes('ghazi')) {\n    return false;\n  }\n  return {error: true, message};\n}\n\n// Add your custom validator function to validators array of the form constant.\nvalidators: [\n  {check: checkGhazi, message: 'Text does not contain Ghazi'},\n],\n```\n\n## Upcoming\n\n- [x] Custom Validation methods\n- [ ] Dropdown with MultiSelect and Autocomplete\n\n## Contribution\n\n[Contributing Info](./CONTRIBUTING.md)\n\n## License\n\nMIT © [gkhan205](https://github.com/gkhan205)\n","funding_links":["https://www.paypal.me/codewithghazi"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgkhan205%2Fformify-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgkhan205%2Fformify-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgkhan205%2Fformify-react/lists"}