{"id":28249057,"url":"https://github.com/h5sh/react-inertia-form","last_synced_at":"2026-05-07T07:42:31.651Z","repository":{"id":240582421,"uuid":"798819241","full_name":"H5SH/react-inertia-form","owner":"H5SH","description":"Inertia Form Component for React","archived":false,"fork":false,"pushed_at":"2024-06-01T00:24:24.000Z","size":654,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-30T05:39:28.045Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/H5SH.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"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":"2024-05-10T14:37:00.000Z","updated_at":"2024-12-17T05:59:06.000Z","dependencies_parsed_at":"2024-11-20T14:50:10.047Z","dependency_job_id":null,"html_url":"https://github.com/H5SH/react-inertia-form","commit_stats":{"total_commits":12,"total_committers":2,"mean_commits":6.0,"dds":0.08333333333333337,"last_synced_commit":"61a0e8572b14d568123294c9cf74c88183710591"},"previous_names":["h5sh/react-inertia-form"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/H5SH/react-inertia-form","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/H5SH%2Freact-inertia-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/H5SH%2Freact-inertia-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/H5SH%2Freact-inertia-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/H5SH%2Freact-inertia-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/H5SH","download_url":"https://codeload.github.com/H5SH/react-inertia-form/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/H5SH%2Freact-inertia-form/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259637545,"owners_count":22888278,"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":[],"created_at":"2025-05-19T13:14:05.588Z","updated_at":"2026-05-07T07:42:26.617Z","avatar_url":"https://github.com/H5SH.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# inertiajs-react-form\n\n\u003e Inertia form component identical to formik but uses inertia useForm in the background\n\n[![NPM](https://img.shields.io/npm/v/inertiajs-react-form.svg)](https://www.npmjs.com/package/inertiajs-react-form) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n## Install\n\n```bash\nnpm install --save inertiajs-react-form\n```\n\n## Parent dependencies\n\n- react\n- @inertiajs/react\n\n## Usage\n\n```jsx\nimport { InertiaForm, LabelField, Form } from 'inertiajs-react-form';\n\nfunction App() {\n\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cInertiaForm\n      onSubmit={(data) =\u003e console.log(data)}\n      enableReInitialization={true}\n      initialValues={{name: '', last_name: ''}}\n      \u003e\n        {({data, setData, errors, reset, progress,processing,  handleSubmit})=\u003e (\n          \u003c\u003e\n          \u003cForm\u003e\n            \u003cLabelField label='Name' name='name'/\u003e\n            \u003cLabelField label='Last Name' name='last_name' /\u003e\n          \u003c/Form\u003e\n          \u003cbutton onClick={handleSubmit}\u003eSubmit\u003c/button\u003e\n          \u003c/\u003e\n        )}\n      \u003c/InertiaForm\u003e\n    \u003c/div\u003e\n  );\n\n}\n\nexport default App;\n```\n\n## InertiaForm\n\nInertiaForm component sets the context using useForm hook and initial values.\n\n### props\n\n|         name         | data type | required | defaultValues|\n|----------------------|-----------|----------|--------------|\n|initialValues         |  object   |   true   |  undefined   |\n|  onSubmit            | function  |   true   |  undefined   |\n|enableReInitialization| boolean   |   false  |    false     |\n\n## Form\n\nrenders form and passes the submit function\n\n## LabeledDropdown\n\nRenders a labled dropdown\n\n### props\n\n|         name       | data type | required | defaultValues |\n|--------------------|-----------|----------|---------------|\n|        list        |   array   |  true    |      []       |\n|        name        |   string  |  true    |      ''       |\n|        label       |   string  |  false   |      ''       |\n|   errorClassName   |   string  |  false   |  text-danger  |\n|   labelClassName   |   string  |  false   |  form-label   |\n|   selectClassName  |   string  |  false   |  form-select  |\n|   onChange         | function  |  false   |   undefined   |\n|  formateLabel      | function  |  false   |   undefined   | \n\n### Formate label example\n\n```jsx\n\u003cLabeledDropdown\n formateLabel={({ name }) =\u003e (\n     \u003c\u003e\n         {name}\n     \u003c/\u003e\n )}\n list={companies}\n onChange={(value) =\u003e setData({\n     ...data,\n     company_id: value,\n })}\n label=\"Company\"\n name=\"company_id\"\n/\u003e\n```\n\n## LabelField\n\n### props\n\n|         name       | data type | required | defaultValues |\n|--------------------|-----------|----------|---------------|\n|        disabled    |   boolean |  false   |   undefined   |\n|        name        |   string  |  true    |      ''       |\n|        label       |   string  |  false   |      ''       |\n|        type        |   string  |  false   |     text      |  \n|     placeholder    |   string  |  false   |   undefined   |\n|   errorClassName   |   string  |  false   |   text-danger |\n|   labelClassName   |   string  |  false   |   form-label  |\n|   fieldClassName   |   string  |  false   |  form-control |\n|   onChange         | function  |  false   |   undefined   |\n\n## LabelTextArea\n\n### props\n\n|         name       | data type | required | defaultValues |\n|--------------------|-----------|----------|---------------|\n|        rows        |   integer |  false   |      4        |\n|        cols        |   integer |  false   |      5        |\n|        name        |   string  |  true    |      ''       |\n|        label       |   string  |  false   |      ''       |\n|     placeholder    |   string  |  false   |   undefined   |\n|   errorClassName   |   string  |  false   |  text-danger  |\n|   labelClassName   |   string  |  false   |  form-label   |\n|  textareaClassName |   string  |  false   |  form-control |\n|   onChange         | function  |  false   |  undefined    |\n\n## License\n\nMIT © [H5SH](https://github.com/H5SH)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fh5sh%2Freact-inertia-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fh5sh%2Freact-inertia-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fh5sh%2Freact-inertia-form/lists"}