{"id":13450358,"url":"https://github.com/wellyshen/react-cool-form","last_synced_at":"2026-01-14T13:33:35.519Z","repository":{"id":37069524,"uuid":"294433024","full_name":"wellyshen/react-cool-form","owner":"wellyshen","description":"😎 📋 React hooks for forms state and validation, less code more performant.","archived":true,"fork":false,"pushed_at":"2022-07-27T15:44:02.000Z","size":9216,"stargazers_count":248,"open_issues_count":46,"forks_count":9,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-11-01T00:02:48.661Z","etag":null,"topics":["arrays","asynchronous","controlled","dx","form","form-builder","form-state","form-validation","forms","hooks","lists","performance","react","react-hooks","state","state-management","typescript","uncontrolled","ux","validation"],"latest_commit_sha":null,"homepage":"https://react-cool-form.netlify.app","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/wellyshen.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null},"funding":{"github":null,"patreon":null,"open_collective":"react-cool-form","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2020-09-10T14:26:08.000Z","updated_at":"2025-08-27T13:21:04.000Z","dependencies_parsed_at":"2022-07-20T11:47:47.337Z","dependency_job_id":null,"html_url":"https://github.com/wellyshen/react-cool-form","commit_stats":null,"previous_names":[],"tags_count":179,"template":true,"template_full_name":null,"purl":"pkg:github/wellyshen/react-cool-form","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wellyshen%2Freact-cool-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wellyshen%2Freact-cool-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wellyshen%2Freact-cool-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wellyshen%2Freact-cool-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wellyshen","download_url":"https://codeload.github.com/wellyshen/react-cool-form/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wellyshen%2Freact-cool-form/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28421249,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-14T13:30:50.153Z","status":"ssl_error","status_checked_at":"2026-01-14T13:29:08.907Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: 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":["arrays","asynchronous","controlled","dx","form","form-builder","form-state","form-validation","forms","hooks","lists","performance","react","react-hooks","state","state-management","typescript","uncontrolled","ux","validation"],"created_at":"2024-07-31T07:00:33.917Z","updated_at":"2026-01-14T13:33:35.489Z","avatar_url":"https://github.com/wellyshen.png","language":"TypeScript","funding_links":["https://opencollective.com/react-cool-form"],"categories":["Packages"],"sub_categories":[],"readme":"\u003e ⚠️ Thank you for supporting me, this library isn't maintained anymore. Please consider other libraries.\n\n\u003cp align=\"center\"\u003e\n  \u003cbr/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://react-cool-form.netlify.app\" title=\"React Cool Form\"\u003e\u003cimg src=\"https://react-cool-form.netlify.app/img/logo-github.svg\" width=\"300px\" alt=\"React Cool Form\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003eReact hooks for forms state and validation, less code more performant.\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![npm version](https://img.shields.io/npm/v/react-cool-form?style=flat-square)](https://www.npmjs.com/package/react-cool-form)\n[![npm downloads](https://img.shields.io/npm/dt/react-cool-form?style=flat-square)](https://www.npmtrends.com/react-cool-form)\n[![coverage status](https://img.shields.io/coveralls/github/wellyshen/react-cool-form?style=flat-square)](https://coveralls.io/github/wellyshen/react-cool-form?branch=master)\n[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)\n[![netlify deploy](https://img.shields.io/netlify/3c201e27-b611-4512-b827-9523af7a1ae5?style=flat-square)](https://app.netlify.com/sites/react-cool-form/deploys)\n\n\u003c/div\u003e\n\n## Features\n\n- 🎣 [Easy to use](https://react-cool-form.netlify.app/docs/getting-started/integration-an-existing-form), React Cool Form is [a set of React hooks](https://react-cool-form.netlify.app/docs/api-reference/use-form) that helps you conquer all kinds of forms.\n- 🗃 Manages [dynamic](https://react-cool-form.netlify.app/docs/examples/conditional-fields) and [complex](https://react-cool-form.netlify.app/docs/getting-started/complex-structures) form data without hassle.\n- 🪄 Manages [arrays and lists](https://react-cool-form.netlify.app/docs/getting-started/arrays-and-lists) data like a master.\n- 🚦 Supports [built-in](https://react-cool-form.netlify.app/docs/getting-started/validation-guide#built-in-validation), [form-level](https://react-cool-form.netlify.app/docs/getting-started/validation-guide#form-level-validation), and [field-level](https://react-cool-form.netlify.app/docs/getting-started/validation-guide#field-level-validation) validation.\n- 🚀 Highly performant, [minimizes the number of re-renders](https://react-cool-form.netlify.app#performance-matters) for you.\n- 🧱 Seamless integration with existing HTML form inputs or [3rd-party UI libraries](https://react-cool-form.netlify.app/docs/getting-started/3rd-party-ui-libraries).\n- 🎛 Super flexible [API](https://react-cool-form.netlify.app/docs/api-reference/use-form) design, built with [DX and UX](https://react-cool-form.netlify.app/docs) in mind.\n- 🔩 Provides useful [utility functions](https://react-cool-form.netlify.app/docs/api-reference/utility-functions) to boost forms development.\n- 📜 Supports [TypeScript](https://react-cool-form.netlify.app/docs/getting-started/typescript-support) type definition.\n- ☁️ Server-side rendering compatibility.\n- 🦔 A [tiny size](https://react-cool-form.netlify.app/docs/getting-started/bundle-size-overview) ([~ 7.1kB gizpped](https://bundlephobia.com/result?p=react-cool-form)) library but powerful.\n\n## [Docs](https://react-cool-form.netlify.app)\n\nSee the documentation at [react-cool-form.netlify.app](https://react-cool-form.netlify.app) for more information about using React Cool Form!\n\nFrequently viewed docs:\n\n- [Getting Started](https://react-cool-form.netlify.app/docs)\n- [Examples](https://react-cool-form.netlify.app/docs/examples/basic)\n- [API Reference](https://react-cool-form.netlify.app/docs/api-reference/use-form)\n\n## Quick Start\n\nTo use React Cool Form, you must use `react@16.8.0` or greater which includes hooks. This package is distributed via [npm](https://www.npmjs.com/package/react-cool-form).\n\n```sh\n$ yarn add react-cool-form\n# or\n$ npm install --save react-cool-form\n```\n\nHere's the basic concept of how it rocks:\n\n[![Edit RCF - Quick start](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/rcf-quick-start-j8p1l?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n```js\nimport { useForm } from \"react-cool-form\";\n\nconst Field = ({ label, id, error, ...rest }) =\u003e (\n  \u003cdiv\u003e\n    \u003clabel htmlFor={id}\u003e{label}\u003c/label\u003e\n    \u003cinput id={id} {...rest} /\u003e\n    {error \u0026\u0026 \u003cp\u003e{error}\u003c/p\u003e}\n  \u003c/div\u003e\n);\n\nconst App = () =\u003e {\n  const { form, use } = useForm({\n    // (Strongly advise) Provide the default values\n    defaultValues: { username: \"\", email: \"\", password: \"\" },\n    // The event only triggered when the form is valid\n    onSubmit: (values) =\u003e console.log(\"onSubmit: \", values),\n  });\n  // We can enable the \"errorWithTouched\" option to filter the error of an un-blurred field\n  // Which helps the user focus on typing without being annoyed by the error message\n  const errors = use(\"errors\", { errorWithTouched: true }); // Default is \"false\"\n\n  return (\n    \u003cform ref={form} noValidate\u003e\n      \u003cField\n        label=\"Username\"\n        id=\"username\"\n        name=\"username\"\n        // Support built-in validation\n        required\n        error={errors.username}\n      /\u003e\n      \u003cField\n        label=\"Email\"\n        id=\"email\"\n        name=\"email\"\n        type=\"email\"\n        required\n        error={errors.email}\n      /\u003e\n      \u003cField\n        label=\"Password\"\n        id=\"password\"\n        name=\"password\"\n        type=\"password\"\n        required\n        minLength={8}\n        error={errors.password}\n      /\u003e\n      \u003cinput type=\"submit\" /\u003e\n    \u003c/form\u003e\n  );\n};\n```\n\n✨ Pretty easy right? React Cool Form is more powerful than you think. Let's [explore it](https://react-cool-form.netlify.app) now!\n\n## Articles / Blog Posts \n\n\u003e 💡 If you have written any blog post or article about React Cool Form, please open a PR to add it here.\n\n- Featured on [React Status #245](https://react.statuscode.com/issues/245).\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://wellyshen.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/21308003?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eWelly\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-wellyshen\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/wellyshen/react-cool-form/commits?author=wellyshen\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/wellyshen/react-cool-form/commits?author=wellyshen\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#infra-wellyshen\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e \u003ca href=\"#maintenance-wellyshen\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/Chris-James\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/4596428?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eChris\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/wellyshen/react-cool-form/issues?q=author%3AChris-James\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwellyshen%2Freact-cool-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwellyshen%2Freact-cool-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwellyshen%2Freact-cool-form/lists"}