{"id":17528655,"url":"https://github.com/jucian0/createform","last_synced_at":"2025-04-08T16:07:41.188Z","repository":{"id":37563112,"uuid":"265648092","full_name":"jucian0/createform","owner":"jucian0","description":"The ReactJS form library","archived":false,"fork":false,"pushed_at":"2024-10-07T01:26:48.000Z","size":10730,"stargazers_count":188,"open_issues_count":0,"forks_count":13,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-01T14:06:58.255Z","etag":null,"topics":["form","form-builder","form-validation","forms","hacktoberfest","hacktoberfest2023","hook","hooks","javascript","react","react-hooks","reactjs","typescript","validation"],"latest_commit_sha":null,"homepage":"https://react-createform.vercel.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/jucian0.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":"code-of-conduct.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-20T18:07:26.000Z","updated_at":"2025-03-09T03:53:21.000Z","dependencies_parsed_at":"2024-01-22T12:18:43.663Z","dependency_job_id":"e1a6fb47-424c-4f70-aeb7-4e9da1564691","html_url":"https://github.com/jucian0/createform","commit_stats":{"total_commits":645,"total_committers":10,"mean_commits":64.5,"dds":0.0852713178294574,"last_synced_commit":"ebd8ad4c83d85a34cd028fb06302248b5ea7088b"},"previous_names":["jucian0/useform"],"tags_count":73,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jucian0%2Fcreateform","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jucian0%2Fcreateform/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jucian0%2Fcreateform/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jucian0%2Fcreateform/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jucian0","download_url":"https://codeload.github.com/jucian0/createform/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247878022,"owners_count":21011158,"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":["form","form-builder","form-validation","forms","hacktoberfest","hacktoberfest2023","hook","hooks","javascript","react","react-hooks","reactjs","typescript","validation"],"created_at":"2024-10-20T15:44:28.682Z","updated_at":"2025-04-08T16:07:41.165Z","avatar_url":"https://github.com/jucian0.png","language":"TypeScript","readme":"![createform-logo](img/logo.svg)\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\n\u003ch1 align=\"center\"\u003eCreateform\u003c/h1\u003e\n\u003ch2 align=\"center\"\u003eThe ReactJS form library\u003c/h2\u003e\n\n[![GitHub license](https://img.shields.io/badge/License-mit-green)](https://github.com/jucian0/createform/blob/master/LICENSE)\n[![GitHub coverage](https://img.shields.io/badge/coverage-96.8%25-brightgreen)](https://github.com/jucian0/createform/tree/master/test)\n[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=React+hook+for+forms+and+validations\u0026url=https://github.com/jucian0/createform\u0026hashtags=reactjs,hook,javascript,forms)\n[![npm-version](https://img.shields.io/npm/v/@createform/react)](https://www.npmjs.com/package/@createform/react)\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@createform/react?color=ff)](https://bundlephobia.com/package/@createform/react@3.3.2)\n[![GitHub Repo stars](https://img.shields.io/github/stars/jucian0/createform?style=social)](https://github.com/jucian0/createform/stargazers)\n\n# Links\n - Read the full documentation [here](https://createform.run).\n - View the source code [here](https://github.com/jucian0/createform).\n - Discord server [here](https://discord.gg/JwYbbrgKgj).\n - Twitter [here](https://twitter.com/juciano_barbosa).\n\n## Introduction\n\nCreateform is a ReactJS library that makes it easy to create forms. It offers two different approaches for managing forms: creating a custom hook with the `createForm` function and using the `useForm` hook.\n\n## `createForm()`\n\nCreateform provides a unique approach to form management by guiding you to create custom hooks using the `createForm` function. This allows you to use the same form in different components without relying on the React Context API.\n\n- Similar to other packages, you can also use Yup or Zod validation to validate your forms.\n- You have the flexibility to handle your forms using different approaches such as `onSubmit`, `onChange`, or `debounce`.\n- Requires less code compared to other options.\n\n### How it works\n\nCreateform utilizes an external store to maintain the form state. However, to share the state with other components without using React Context, it provides the `createForm` function. This function creates a form and returns a hook that is connected to the store. Whenever the store changes, the hook is notified, and the form is updated.\n\nIn other words, the `createForm` function creates a form and returns a hook that includes all the necessary resources to manage the form. If you use this hook multiple times, it refers to the same form and store, enabling the use of the same form in different components without providers or the React Context API.\n\n![createform-flow](img/createform-flow.png)\n\n### Reasons to use Createform\n\nThere are several motivations for using a custom form hook created by `createForm` in a React application. Some of these motivations include:\n\n- **Reusability**: Using a custom form hook created by `createForm` allows you to reuse the same form logic across multiple components in your application. This eliminates the need to duplicate form handling code, saving time and making your code more organized and maintainable.\n\n- **Flexibility**: With a custom form hook created by `createForm`, you have the flexibility to customize the behavior of your forms and define their functionality according to your specific requirements. This includes features like input validation and form data submission to an API.\n\n- **Simplicity**: Working with forms in your React application becomes easier with a custom form hook created by `createForm`. By abstracting the details of form handling, you can focus on the core logic of your application and avoid complexities associated with form management.\n\n- **Separation of concerns**: A custom form hook created by `createForm` allows you to separate the concerns of form handling and data management from the rest of your application. This simplifies testing and maintenance, while improving the overall organization and structure of your application.\n\n## `useForm()`\n\nThe second approach is to use the `useForm` hook. This approach provides an easy way to manage forms, differing from `createForm()`. You don't need to register each input individually; instead, you can register the entire form element. `useForm` utilizes native events and APIs to handle the inputs.\n\n`useForm` does not use React state to manage the form state; it only stores form errors in case of validation issues.\n\n## What to expect with Createform\n\nRegardless of the approach you choose, here's what you can expect when using Createform:\n\n- **Performant forms**: Createform allows you to complete and submit forms without triggering unnecessary rerenders. By default, Createform creates uncontrolled forms.\n- **Simplified coding**: Createform provides an intuitive way to write forms with less code. The `register` function returns the necessary properties for each input, which is all you need to manage input events using native HTML `input` elements. You can write forms without the need for a `\u003cform\u003e` tag.\n- **Easy validation** - By default Createform uses yup validation, we can write complex validation without effort.\n\n## Installation\n\n```bash\nnpm install --save @createform/react\n```\n\n```bash\nyarn add @createform/react\n```\n\n## `createForm()` usage\n\n### First create your form\n\nThe first step is to create your form with the `createForm` function, this function returns a hook that you can use to manage your form, wherever you want to use.\n\n```javascript\nimport { createForm } from \"@createform/react\";\n\nexport const useLoginForm = createForm({\n  initialValues: {\n    email: \"jucian0@jucian0.com\",\n    password: \"yourpassword\",\n  },\n});\n```\n\n### Second use it in your component\n\nThe second step is to create a component to render your form, you can use the `useLoginForm` hook to get the form state and manage it.\n\n```jsx\nimport { useLoginForm } from \"./useLoginForm.js\";\n\nconst LoginForm = () =\u003e {\n  const { handleSubmit, register } = useLoginForm();\n\n  function onSubmit(values) {\n    console.log(values);\n  }\n\n  return (\n    \u003cform onSubmit={handleSubmit(onSubmit)}\u003e\n      \u003cinput type=\"email\" {...register(\"email\")} /\u003e\n      \u003cinput type=\"password\" {...register(\"password\")} /\u003e\n      \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n    \u003c/form\u003e\n  );\n};\n```\n\n## `useForm()` usage\n\n Native way to create forms.\n\n```javascript\nimport { useForm } from \"@createform/react\";\n\nexport function LoginForm() {\n  const { register } = useForm({\n    initialValues: {\n      email: \"jucian0@jucian0.com\",\n      password: \"yourpassword\",\n    },\n    onSubmit,\n  });\n\n  function onSubmit(values) {\n    console.log(values);\n  }\n\n  return (\n    \u003cform {...register()}\u003e\n      \u003cinput type=\"email\" name=\"email\" /\u003e\n      \u003cinput type=\"password\" name=\"password\" /\u003e\n      \u003cbutton type=\"submit\"\u003e Submit \u003c/button\u003e\n    \u003c/form\u003e\n  );\n```\n\n## Read the full documentation [here](https://www.createform.run).\n\n## 🤝 Contributing\n\nContributions, issues and feature requests are welcome!\u003cbr /\u003eFeel free to check [issues page](https://github.com/jucian0/createform/issues). You can also take a look at the [contributing guide](https://github.com/Jucian0/createform/blob/main/CONTRIBUTING.md).\n\n### Ways to Contribute\n\n- **Code Contributions:** If you are a developer, you can help us improve the project by contributing code. You can find our project on GitHub [here](https://github.com/jucian0/createform), where you can create issues, fork the project, make changes, and submit pull requests.\n\n- **Documentation:** We are always looking for help with documentation. If you have expertise in the project or have experience writing technical documentation, we would appreciate your contributions.\n\n- **Bug Reports:** If you find a bug, please report it! You can create a new issue on GitHub and provide as much information as possible. This will help us reproduce the issue and fix it quickly.\n\n- **Feature Requests:** If you have a feature request, please let us know by creating a new issue on GitHub. We welcome feedback and ideas for how to improve the project.\n\n- **Spread the Word:** If you like our project, you can help us by sharing it with others. Tell your friends, colleagues, or anyone who might be interested. You can also follow us on social media and share our posts.\n\n## Show your support\n\nGive us a ⭐️\n\n[![Stargazers repo roster for createform](https://reporoster.com/stars/jucian0/createform)](https://github.com/jucian0/createform/stargazers)\n\n## Contributors\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  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://nelsonuprety.netlify.app/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/25173636?v=4?s=100\" width=\"100px;\" alt=\"Nelson Uprety\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eNelson Uprety\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/jucian0/createform/commits?author=nelsonuprety1\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://juciano.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/8399579?v=4?s=100\" width=\"100px;\" alt=\"Juciano\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJuciano\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/jucian0/createform/commits?author=jucian0\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\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\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\n## 📝 License\n\nCopyright © 2023 [jucian0](https://github.com/jucian0).\u003cbr /\u003e\nThis project is [MIT](https://github.com/jucian0/createform/blob/53debd6986650f76561795f2069d6eebc5db6c65/LICENSE) licensed.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjucian0%2Fcreateform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjucian0%2Fcreateform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjucian0%2Fcreateform/lists"}