{"id":16811721,"url":"https://github.com/theoludwig/react-component-form","last_synced_at":"2025-11-05T15:30:26.298Z","repository":{"id":57959971,"uuid":"285003141","full_name":"theoludwig/react-component-form","owner":"theoludwig","description":"Manage React Forms with ease.","archived":true,"fork":false,"pushed_at":"2024-11-11T13:03:51.000Z","size":3523,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"develop","last_synced_at":"2025-02-15T09:53:14.770Z","etag":null,"topics":["npm-package","react-component-form","react-form"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-component-form","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/theoludwig.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-04T14:21:59.000Z","updated_at":"2024-11-11T13:08:26.000Z","dependencies_parsed_at":"2023-02-08T20:15:37.815Z","dependency_job_id":"0a522082-9003-4af1-b267-926942f013b1","html_url":"https://github.com/theoludwig/react-component-form","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theoludwig%2Freact-component-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theoludwig%2Freact-component-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theoludwig%2Freact-component-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theoludwig%2Freact-component-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/theoludwig","download_url":"https://codeload.github.com/theoludwig/react-component-form/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239462811,"owners_count":19642826,"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":["npm-package","react-component-form","react-form"],"created_at":"2024-10-13T10:19:33.899Z","updated_at":"2025-11-05T15:30:26.245Z","avatar_url":"https://github.com/theoludwig.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003ereact-component-form\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003eManage React Forms with ease.\u003c/strong\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003e⚠️ This project is not maintained anymore, you can still use the code as you wish and fork it to maintain it yourself.\u003c/strong\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"./CONTRIBUTING.md\"\u003e\u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat\" alt=\"CONTRIBUTING /\u003e\u003c/a\u003e\n  \u003ca href=\"./LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/badge/licence-MIT-blue.svg\" alt=\"Licence MIT\"/\u003e\u003c/a\u003e\n  \u003ca href=\"./CODE_OF_CONDUCT.md\"\u003e\u003cimg src=\"https://img.shields.io/badge/Contributor%20Covenant-v2.0%20adopted-ff69b4.svg\" alt=\"Contributor Covenant\" /\u003e\u003c/a\u003e\n  \u003cbr /\u003e\n  \u003ca href=\"https://github.com/theoludwig/react-component-form/actions/workflows/build.yml\"\u003e\u003cimg src=\"https://github.com/theoludwig/react-component-form/actions/workflows/build.yml/badge.svg?branch=develop\" alt=\"Build\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/theoludwig/react-component-form/actions/workflows/lint.yml\"\u003e\u003cimg src=\"https://github.com/theoludwig/react-component-form/actions/workflows/lint.yml/badge.svg?branch=develop\" alt=\"Lint\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/theoludwig/react-component-form/actions/workflows/test.yml\"\u003e\u003cimg src=\"https://github.com/theoludwig/react-component-form/actions/workflows/test.yml/badge.svg?branch=develop\" alt=\"Test\" /\u003e\u003c/a\u003e\n  \u003cbr /\u003e\n  \u003ca href=\"https://conventionalcommits.org\"\u003e\u003cimg src=\"https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg\" alt=\"Conventional Commits\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/semantic-release/semantic-release\"\u003e\u003cimg src=\"https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg\" alt=\"semantic-release\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-component-form\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/react-component-form.svg\" alt=\"npm version\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## 📜 About\n\n**react-component-form** is a lightweight form component for [React.js](https://reactjs.org/), it allows you to get the inputs values without state thanks to `onChange` or `onSubmit` props.\n\nThere is also a [React Hooks](https://reactjs.org/docs/hooks-intro.html) to be used in combination with the `\u003cForm /\u003e` component to validate the data with [Ajv JSON schema validator](https://ajv.js.org/), see [advanced usage](#%EF%B8%8F-advanced-usage).\n\nExample demo: [https://react-component-form.vercel.app/](https://react-component-form.vercel.app/).\n\n## 💾 Install\n\n```sh\nnpm install --save react-component-form\n```\n\n## ⚙️ Usage\n\n_Note: The examples use TypeScript, but obviously you can use JavaScript. Be aware that `HandleForm` is the type definition for the `onChange` and `onSubmit` props._\n\n```tsx\nimport React from \"react\"\nimport { Form } from \"react-component-form\"\nimport type { HandleForm } from \"react-component-form\"\n\nexport const Example = () =\u003e {\n  const handleSubmit: HandleForm = (formData, formElement) =\u003e {\n    console.log(formData) // { inputName: 'value of the input' }\n    formElement.reset()\n  }\n\n  return (\n    \u003cForm onSubmit={handleSubmit}\u003e\n      \u003cinput type=\"text\" name=\"inputName\" /\u003e\n      \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n    \u003c/Form\u003e\n  )\n}\n```\n\nBasically you have access to the same props of the HTML `form` tag in React, but the `onSubmit` and the `onChange` props are differents.\n\nInstead to get the `event` param you get `formData` and `formElement` parameters:\n\n- `formData`: Object where the keys are the name of your inputs and the current value. Behind the scene, it uses the [FormData](https://developer.mozilla.org/docs/Web/API/FormData) constructor.\n- `formElement`: The HTML form element in the DOM so for example you can access the `.reset()` method on a [HTMLFormElement](https://developer.mozilla.org/docs/Web/API/HTMLFormElement).\n\n## ⚙️ Advanced Usage\n\nThis example shows how to use the `\u003cForm /\u003e` component with `useForm` hook to validate the data with [Ajv JSON schema validator](https://ajv.js.org/).\n\nYou can see a more detailled example in the [./example](./example) folder.\n\n```tsx\nimport React from \"react\"\nimport { Form, useForm } from \"react-component-form\"\nimport type { HandleUseFormCallback } from \"react-component-form\"\n\nconst schema = {\n  inputName: {\n    type: \"string\",\n    minLength: 3,\n    maxLength: 20,\n  },\n}\n\nexport const Example = () =\u003e {\n  const { handleUseForm, errors, message } = useForm(schema)\n\n  const onSubmit: HandleUseFormCallback\u003ctypeof schema\u003e = (\n    formData,\n    formElement,\n  ) =\u003e {\n    console.log(formData) // { inputName: 'value of the input validated and type-safe' }\n    formElement.reset()\n\n    // The return can be either `null` or an object with a global message of type `'error' | 'success'`.\n    return {\n      type: \"success\",\n      message: \"Success: Form submitted\",\n    }\n  }\n\n  return (\n    \u003cForm onSubmit={handleUseForm(onSubmit)}\u003e\n      \u003cinput type=\"text\" name=\"inputName\" /\u003e\n      {errors.inputName != null \u0026\u0026 \u003cp\u003e{errors.inputName[0].message}\u003c/p\u003e}\n\n      \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n\n      {message != null \u0026\u0026 \u003cp\u003e{message}\u003c/p\u003e}\n    \u003c/Form\u003e\n  )\n}\n```\n\n## API\n\n### `useForm(schema)`\n\n#### Parameters\n\n- `schema`: The JSON schema to validate the data (recommended to use [@sinclair/typebox](https://www.npmjs.com/package/@sinclair/typebox)).\n\n#### Returns\n\n- `handleUseForm(onSubmit)`: Function to be used with the `onSubmit` or `onChange` prop of the `\u003cForm /\u003e` component.\n- `fetchState = 'idle'`: The current state of the form (`'error' | 'success' | 'idle' | 'loading'`).\n- `setFetchState`: Function to update the `fetchState`.\n- `message`: Global message of the form (not specific to a property).\n- `setMessage`: Function to update the `message`.\n- `errors`: Object of errors:\n  - Key: correspond to a property in the JSON Schema.\n  - Value: array of [ajv `ErrorObject`](https://ajv.js.org/api.html#error-objects).\n    The array will always have at least one element (never empty) in case of errors.\n    If the value is `undefined`, it means there are no errors for this property.\n\n## 💡 Contributing\n\nAnyone can help to improve the project, submit a Feature Request, a bug report or\neven correct a simple spelling mistake.\n\nThe steps to contribute can be found in [CONTRIBUTING.md](./CONTRIBUTING.md).\n\n## 📄 License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheoludwig%2Freact-component-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftheoludwig%2Freact-component-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheoludwig%2Freact-component-form/lists"}