{"id":20495766,"url":"https://github.com/knightburton/react-use-form","last_synced_at":"2026-04-21T04:32:16.023Z","repository":{"id":46516456,"uuid":"373926223","full_name":"knightburton/react-use-form","owner":"knightburton","description":"React hook to handle controlled form change and validation.","archived":false,"fork":false,"pushed_at":"2023-05-04T18:07:38.000Z","size":783,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-05T18:33:21.786Z","etag":null,"topics":["form","form-handler","form-validation","hacktoberfest","react","react-hooks","typescript","use-form","use-form-hook"],"latest_commit_sha":null,"homepage":"","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/knightburton.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-06-04T18:16:41.000Z","updated_at":"2022-01-03T11:22:23.000Z","dependencies_parsed_at":"2022-09-26T18:10:55.465Z","dependency_job_id":null,"html_url":"https://github.com/knightburton/react-use-form","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/knightburton/react-use-form","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knightburton%2Freact-use-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knightburton%2Freact-use-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knightburton%2Freact-use-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knightburton%2Freact-use-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/knightburton","download_url":"https://codeload.github.com/knightburton/react-use-form/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knightburton%2Freact-use-form/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32076915,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-21T02:38:07.213Z","status":"ssl_error","status_checked_at":"2026-04-21T02:38:06.559Z","response_time":128,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["form","form-handler","form-validation","hacktoberfest","react","react-hooks","typescript","use-form","use-form-hook"],"created_at":"2024-11-15T17:47:05.937Z","updated_at":"2026-04-21T04:32:16.009Z","avatar_url":"https://github.com/knightburton.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-use-form\n\n[![Development Workflow](https://github.com/knightburton/react-use-form/actions/workflows/development.yml/badge.svg)](https://github.com/knightburton/react-use-form/actions/workflows/development.yml)\n![npm](https://img.shields.io/npm/v/@knightburton/react-use-form)\n![npm](https://img.shields.io/npm/dt/@knightburton/react-use-form)\n\nReact hook to handle controlled form change and validation.\n\n### Getting started\n#### Compatibility\nYour project needs to use [React.js](https://reactjs.org/) 16.8 or later.\n\n#### Installation\n```bash\n$ npm i @knightburton/react-use-form\n```\nor\n```bash\nyarn add @knightburton/react-use-form\n```\n\n### Usage\nHere's an example of basic usage:\n```jsx\nimport React from 'react';\nimport useForm from '@knightburton/react-use-form';\n\nconst App = () =\u003e {\n  const onSubmit = data =\u003e console.log(data);\n  const { fields, handleChange, handleSubmit } = useForm({\n    schema: [{ field: 'text', value: '' }],\n    onSubmit,\n  });\n\n  return (\n    \u003cform onSubmit={handleSubmit}\u003e\n      \u003cinput type=\"text\" id=\"text\" name=\"text\" value={fields.text.value} onChange={handleChange} /\u003e\n      {fields.text.error \u0026\u0026 \u003cp\u003e{fields.text.error}\u003c/p\u003e}\n      \u003cinput type=\"submit\" value=\"Submit\" /\u003e\n    \u003c/form\u003e\n  );\n};\n\nexport default App;\n```\nFor more detailed example check the [example](./example) directory.\n\n### Output\nThe hook returns an object with the following props.\n\n| Prop name | Type | Description |\n| --- | --- | --- |\n| fields | `object` | Generated fields state with values and errors. |\n| handleChange | `function` | The function is used to update a value inside the fields state. It accepts an input change event. |\n| handleSubmit | `function` | The function is used to submit the fields state for validation. It can accept an event, the behavior of that can be prevented with the `preventDefaultEventOnSubmit` and `stopPropagationEventOnSubmit` option. |\n| updateSchema | `function` | The function is used to submit a new or updated fields state. |\n\n### Options\nThe hook behavior can be modified with the following props.\n| Prop name | Type | Default Value | Description |\n| --- | --- | --- | --- |\n| schema | `object[]` | `[]` | Defines the initial fields state and provides the validation rules for later. Check the `schema` [prop definitions](https://github.com/knightburton/react-use-form#schema-option) |\n| onSubmit | `function` | `undefined` | Function called when the validation was successful after `handleSubmit` triggered. The values from `fields` state will be the first argument. |\n| onError | `function` | `undefined` | Function called when the validation was unsuccessful after `handleSubmit` triggered. The validated `fields` state will be the first argument. |\n| resetOnSubmit | `boolean` | `false` | Whether the field values should be reset to the default value after successful `onSubmit` or not. |\n| preventDefaultEventOnSubmit | `boolean` | `true` | Whether the `handleSubmit` event default behavior should be prevented (if event provided) or not. |\n| stopPropagationEventOnSubmit | `boolean` | `true` | Whether the `handleSubmit` event propagation should be prevented (if event provided) or not. |\n\n### Schema Option\nThe option itself is an `array of objects` and each object should look like this:\n| Prop name | Type | Mandatory | Default Value | Description |\n| --- | --- | --- | --- | --- |\n| field | `string` | Yes | - | Identifier of the field. |\n| value | `generic` | Yes | - | Defines the initial value of the field. |\n| required | `boolean` / [Validator](https://github.com/knightburton/react-use-form#validators) / `function` | No | `false` | Defines whether the field is required or not during the validation. It can be a special validator where the `error` is optional and the fallback will be the `requiredError` or the default builtin error. It can be a function where you can decide whether the field should be required or not based on other field values or the actual field value. |\n| requiredError | `function` / `string` | No | `This field is required.` | Defines the returned error when a field marked as required. Check the [error definitions](https://github.com/knightburton/react-use-form#validators). |\n| validators | `array` | No | `[]` | Defines the validation rules. Check the [definitions](https://github.com/knightburton/react-use-form#validators). |\n\n### Validators\nThis is an `array of objects` where each item defines rules and error messages:\n| Prop name | Type | Mandatory | Description |\n| --- | --- | --- | --- |\n| rule | `function` / `RegExp` | Yes | Defines the rule for field validation. It can be a function where the first arg is the corresponding field value and the second arg is the field values for complex rules. The function must return `boolean` value. |\n| error | `function` / `string` | Yes (No, if used for required.) | Defines the error message for invalid field. It can be a function where the first arg is the corresponding field value and the second arg is the field values for complex message. The function must return `string` value. |\n\n### Development\nLocal development is broken into two parts (ideally using two terminal tabs).\n\nFirst, run rollup to watch your `src/` module and automatically recompile it into `dist/` whenever you make changes.\n```bash\n# Assume that you are in the project main folder\n$ npm i\n$ npm start\n```\nThe second part will be running the `example/` create-react-app that's linked to the local version of your module.\n```bash\n# Assume that you are in the project main folder\n$ cd example\n$ npm i\n$ npm start\n```\n\n### Contributing\nFirst off all, thanks for taking the time to contribute! :muscle:\n\nBefore any action, please visit the [Code of Conduct](https://github.com/knightburton/react-use-form/blob/main/CODE_OF_CONDUCT.md) and [Contributing guideline](https://github.com/knightburton/react-use-form/blob/main/CONTRIBUTING.md) for more information.\n\n### License\n\n`react-use-form` is Open Source software under the MIT license. Complete license and copyright information can be found within the [license](https://github.com/knightburton/react-use-form/blob/main/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fknightburton%2Freact-use-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fknightburton%2Freact-use-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fknightburton%2Freact-use-form/lists"}