{"id":24582575,"url":"https://github.com/chopshop1/ez-form-hook","last_synced_at":"2025-04-24T04:50:33.808Z","repository":{"id":38210881,"uuid":"218434559","full_name":"chopshop1/ez-form-hook","owner":"chopshop1","description":"React forms made ez","archived":false,"fork":false,"pushed_at":"2023-01-27T07:34:17.000Z","size":6092,"stargazers_count":8,"open_issues_count":7,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-30T07:05:38.231Z","etag":null,"topics":["dymanic-forms","form","form-generator","react","schema","schema-based-forms","typescript","uniform"],"latest_commit_sha":null,"homepage":"http://ezcorp.org/","language":"TypeScript","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/chopshop1.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":"2019-10-30T03:19:45.000Z","updated_at":"2022-06-09T01:23:28.000Z","dependencies_parsed_at":"2023-02-04T06:46:37.943Z","dependency_job_id":null,"html_url":"https://github.com/chopshop1/ez-form-hook","commit_stats":null,"previous_names":["chopshop1/ez-form-hook"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chopshop1%2Fez-form-hook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chopshop1%2Fez-form-hook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chopshop1%2Fez-form-hook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chopshop1%2Fez-form-hook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chopshop1","download_url":"https://codeload.github.com/chopshop1/ez-form-hook/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250566445,"owners_count":21451230,"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":["dymanic-forms","form","form-generator","react","schema","schema-based-forms","typescript","uniform"],"created_at":"2025-01-24T03:24:15.216Z","updated_at":"2025-04-24T04:50:33.787Z","avatar_url":"https://github.com/chopshop1.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### EzForm Hook\n\nEzFormly generates a form from a schema with on the fly customizability!\n\n[![NPM downloads](https://img.shields.io/npm/v/ez-form-hook.svg)](https://www.npmjs.com/package/ez-form-hook)\n[![NPM downloads](https://img.shields.io/npm/dt/ez-form-hook.svg)](https://www.npmjs.com/package/ez-form-hook)\n[![NPM downloads](https://img.shields.io/bundlephobia/minzip/ez-form-hook)](https://img.shields.io/bundlephobia/minzip/ez-form-hook)\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n## Why?\n\n- helps save time writing complex forms\n- allows you to easily share inputs with other forms\n- allows teams to stay consistent with forms\n- handles the repetitive dull parts of creating a form for you!\n\n## Hook props:\n\n| Prop                  | Type       | Required | Description                                                                                                                               |\n| --------------------- | ---------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------- |\n| submitButton          | `JSX`      | false    | submit button to submit form EX: `\u003cbutton type=\"submit\"\u003ecustom submit\u003c/button\u003e`                                                           |\n| onSubmit              | `Function` | false    | triggers on submit button click and returns all values                                                                                    |\n| onUpdate              | `Function` | false    | triggers formValues update                                                                                                                |\n| onChange              | `Function` | false    | triggers on input change and returns all values                                                                                           |\n| onBlur                | `Function` | false    | triggers on input blur and returns all values                                                                                             |\n| nestedErrorsManager   | `Function` | false    | used when using a nested form                                                                                                             |\n| schema                | `Object`   | true     | schema based off what form is generated from                                                                                              |\n| validation            | `Object`   | false    | overwrites the `schema`'s validation function for an input (extremely useful when wanting to share a validation schema with other things) |\n| initialValues         | `Object`   | false    | maps the initial values to schema                                                                                                         |\n| featureFlags          | `Object`   | false    | just a object of feature flags                                                                                                            |\n| validateInitialValues | `Boolean`  | false    | validates initial values once form loads                                                                                                  |\n| validateOnChange      | `Boolean`  | false    | validates input on change (default is `true`)                                                                                             |\n| disabled              | `Boolean`  | false    | disables inputs if true                                                                                                                   |\n| multiForm             | `Boolean`  | false    | allows you to create a multi form                                                                                                         |\n| clearFormOnSubmit     | `Boolean`  | false    | clear form on submit                                                                                                                      |\n| viewModeToggled       | `Boolean`  | false    | toggles `viewMode` in schema on initial render                                                                                            |\n| showSubmitButton      | `Boolean`  | false    | disables the automatic render of the submit button                                                                                        |\n| viewModeFallbackText  | `String`   | false    | passes fallback `viewMode` text when value is null or undefined. Default is \"N/A\"                                                         |\n| submitButtonText      | `String`   | false    | replaces text on the submit button                                                                                                        |\n| submitButtonClass     | `String`   | false    | passes css classes down to the submit button                                                                                              |\n| className             | `String`   | false    | passes css classes down to the main form component                                                                                        |\n| errorClass            | `String`   | false    | passes css class to error message                                                                                                         |\n\n## Component Example:\n\n```javascript\nimport { EzFormHook } from \"ez-form-hook\";\nconst schema = {\n  inputs: {\n    name: {\n      label: \"name\",\n      required: false,\n      type: \"text\",\n      placeholder: \"Whats your name\"\n    },\n    age: {\n      label: \"Age\",\n      required: true,\n      type: \"number\",\n      placeholder: \"Whats your age?\"\n    },\n    favoriteColor: {\n      label: \"favoriteColor\",\n      placeholder: \"Favorite color\",\n      options: [\n        { value: \"green\", label: \"green\" },\n        { value: \"red\", label: \"red\" },\n        { value: \"blue\", label: \"blue\" }\n      ]\n    }\n  }\n};\n\nconst Form = () =\u003e {\n  const onSubmit = values =\u003e {\n    console.log(values);\n  };\n\n  const { form } = EzFormHook({ schema, onSubmit });\n\n  return \u003cdiv\u003e{form}\u003c/div\u003e;\n};\n```\n\n```javascript\n// More complex example\n\nconst Form = () =\u003e {\n  const onSubmit = values =\u003e {\n    console.log(values);\n  };\n  const customSubmitButton = \u003cbutton type=\"submit\"\u003eMy Custom Submit\u003c/button\u003e;\n\n  const { form, clearForm, addFields, removeFields } = EzFormHook({\n    schema,\n    onSubmit,\n    submitButton: customSubmitButton\n  });\n\n  return (\n    \u003cdiv\u003e\n      {form}\n      \u003cbutton onClick={clearForm}\u003eClear Form\u003c/button\u003e\n      \u003cbutton onClick={addFields}\u003eAdd Fields\u003c/button\u003e\n      \u003cbutton onClick={removeFields}\u003eRemove Fields\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n## Schema Format:\n\n| Key                 | Type                 | Default | Description                                                                                                                                       |\n| ------------------- | -------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |\n| validate            | `Function`           | null    | uses this function to validate input                                                                                                              |\n| visibleIf           | `Function`           | null    | adds ability to check if certain criteria is met and then make the input visible if it is                                                         |\n| onSubmit            | `Function`           | null    | on submit run mutation function and return value (Will not run function if value is empty)                                                        |\n| label               | `String`             | null    | text in input label                                                                                                                               |\n| initialValue        | `any`                | null    | sets initial value of input                                                                                                                       |\n| type                | `String`             | null    | input type: https://www.w3schools.com/html/html_form_input_types.asp                                                                              |\n| placeholder         | `String`             | null    | sets input placeholder                                                                                                                            |\n| featureFlag         | `String`             | null    | feature flag input is associated with                                                                                                             |\n| required            | `Boolean / Function` | false   | sets input as required                                                                                                                            |\n| clearFormOnSubmit   | `Boolean`            | true    | set to false if you don't want inputs to clear after submit                                                                                       |\n| tracked             | `Boolean`            | true,   | allows you to disable value tracking on the input                                                                                                 |\n| customComponent     | `JSX`                | null    | allows you to put whatever `JSX` you'd like to put in form                                                                                        |\n| functionalComponent | `JSX`                | null    | allows you to put whatever `Functional Component` you'd like to put in form                                                                       |\n| viewModeComponent   | `Function`           | null    | allows you to put whatever `Component` below the label you'd like to render when `viewMode` is toggled `value and values, get passed to function` |\n| viewModeClass       | `Function`           | null    | class put onto the viewMode Text                                                                                                                  |\n| prependHtml         | `JSX`                | null    | append html after the input                                                                                                                       |\n| options             | `Array`              | null    | converts input to select box options rendered from `Array` `[{value: true, label: \"yes\"}, { value: false, label: 'no' }]`                         |\n| ...ETC              | `ANY`                | null    | Anything else you add to schema get passed to the inputs as a prop                                                                                | s |\n\n## Schema Example:\n\n```javascript\nimport { EzValidation } from \"ez-validation\";\nschema = {\n  inputs: {\n    name: {\n      label: \"name\",\n      initialValue: \"Whats your name\",\n      validate: (val, vals) =\u003e\n        EzValidation(val)\n          .isString()\n          .minLength(2).errorMessage,\n      required: false,\n      onSubmit: (val, vals) =\u003e {\n        if (val.length \u003e 10) {\n          return val + \" Thats a long Name\";\n        }\n      },\n      type: \"text\",\n      placeholder: \"name\"\n    },\n    length: {\n      label: \"length\",\n      required: true,\n      type: \"number\",\n      placeholder: \"length of package\"\n    },\n    moneyMoney: {\n      label: \"Money Money\",\n      placeholder: \"How much you got?\",\n      type: \"text\",\n      prependHtml: (\n        \u003cdiv className=\"input-group-prepend\"\u003e\n          \u003cspan className=\"input-group-text\" id=\"basic-addon1\"\u003e\n            $\n          \u003c/span\u003e\n        \u003c/div\u003e\n      )\n    },\n    lengthIfOne: {\n      label: \"length if one\",\n      visibleIf: values =\u003e values[\"length\"] === \"1\",\n      required: true,\n      type: \"number\",\n      placeholder: \"length\"\n    },\n    selectMulti: {\n      label: \"selectMulti\",\n      type: \"multiSelect\",\n      placeholder: \"Favorite Color\",\n      isMulti: true,\n      required: true,\n      customComponent: Select,\n      options: [\n        { value: 1, label: \"One\" },\n        { value: 2, label: \"Two\" },\n        { value: 3, label: \"Three\" }\n      ]\n    },\n    favoriteColor: {\n      label: \"favoriteColor\",\n      placeholder: \"Favorite color\",\n      options: [\n        { value: \"green\", label: \"green\" },\n        { value: \"red\", label: \"red\" },\n        { value: \"blue\", label: \"blue\" }\n      ]\n    },\n    masked: {\n      label: \"masked\",\n      placeholder: \"masked\",\n      required: true,\n      customComponent: InputMask,\n      mask: \"9999-99-99\",\n      maskChar: null\n    },\n    description: {\n      label: \"description\",\n      placeholder: \"description\",\n      required: false,\n      type: \"textarea\"\n    }\n  }\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchopshop1%2Fez-form-hook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchopshop1%2Fez-form-hook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchopshop1%2Fez-form-hook/lists"}