{"id":14957151,"url":"https://github.com/formcarry/formcarry-react","last_synced_at":"2025-05-02T07:33:00.221Z","repository":{"id":36944714,"uuid":"232632944","full_name":"formcarry/formcarry-react","owner":"formcarry","description":"React library of https://formcarry.com","archived":false,"fork":false,"pushed_at":"2023-10-18T18:04:20.000Z","size":1019,"stargazers_count":17,"open_issues_count":3,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-29T23:07:40.238Z","etag":null,"topics":["api-service","forms","react-hooks","reactjs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/formcarry.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":"2020-01-08T18:38:29.000Z","updated_at":"2024-08-16T03:48:28.000Z","dependencies_parsed_at":"2024-06-21T14:07:54.377Z","dependency_job_id":"1265307b-8f93-45d0-86fd-f67d9013b8f3","html_url":"https://github.com/formcarry/formcarry-react","commit_stats":{"total_commits":14,"total_committers":3,"mean_commits":4.666666666666667,"dds":0.2142857142857143,"last_synced_commit":"a51a5af89fa4257efb8c92479ed64cec1c6a5913"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/formcarry%2Fformcarry-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/formcarry%2Fformcarry-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/formcarry%2Fformcarry-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/formcarry%2Fformcarry-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/formcarry","download_url":"https://codeload.github.com/formcarry/formcarry-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224182209,"owners_count":17269435,"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":["api-service","forms","react-hooks","reactjs"],"created_at":"2024-09-24T13:14:14.980Z","updated_at":"2024-11-12T16:04:51.039Z","avatar_url":"https://github.com/formcarry.png","language":"TypeScript","readme":"# Formcarry React\n\nReact library of [formcarry](https://formcarry.com).\n\n## Getting Started\n\nRun this command to install with yarn:\n\n```\nyarn add @formcarry/react\n```\n\nor with npm:\n\n```\nnpm install --save @formcarry/react\n```\n\n\n*You have to have React as a dependency in your project in order to use this library.*\n\nAlso this package uses [React Hooks](https://reactjs.org/docs/hooks-intro.html), therefore you have to use React \u003e= 16.8.0\n\n### Example\n\nA simple demonstration with React library:\n\n```jsx\nimport { useForm } from '@formcarry/react';\n\nfunction MyFormcarry() {\n  // Call the `useForm` hook in your function component\n  const {state, submit} = useForm({\n    id: 'Your-Form-ID-From-Formcarry'\n  });\n\n  // Success message\n  if (state.submitted) {\n    return \u003cdiv\u003eThank you! We received your submission.\u003c/div\u003e;\n  }\n\n  return (\n    \u003cform onSubmit={submit}\u003e\n\t\t\u003clabel htmlFor=\"name\"\u003eName\u003c/label\u003e\n\t\t\u003cinput id=\"name\" type=\"text\" name=\"text\" /\u003e\n\n\t\t\u003clabel htmlFor=\"surname\"\u003eSurname\u003c/label\u003e\n\t\t\u003cinput id=\"surname\" type=\"text\" name=\"surname\" /\u003e\n\t\t\n\t\t\u003clabel htmlFor=\"email\"\u003eEmail\u003c/label\u003e\n\t\t\u003cinput id=\"email\" type=\"email\" name=\"email\" /\u003e\n\t\t\n\t\t\u003clabel htmlFor=\"message\"\u003eMessage\u003c/label\u003e\n\t\t\u003ctextarea id=\"message\" name=\"message\" /\u003e\n\t\t\n\t\t\u003cbutton type=\"submit\"\u003eSend\u003c/button\u003e\n    \u003c/form\u003e\n  );\n}\n```\nYou have to use a `\u003cform\u003e` element and pass `submit` as the `onSubmit` handler.\n\n### Destructuring with different field name\nWe return `state` and `submit` from `useForm` by default, but you can rename it to whatever you want, like this:\n\n```jsx\nimport { useForm } from '@formcarry/react';\n\nfunction MyFormcarry() {\n  const {state: formcarryState, submit: formcarrySubmit} = useForm({\n\tid: 'Your-Form-ID-From-Formcarry'\n  });\n\n  if (formcarryState.submitted) {\n    return \u003cdiv\u003eThank you! We received your submission.\u003c/div\u003e;\n  }\n\n  return (\n    \u003cform onSubmit={formcarrySubmit}\u003e\n\t\t\u003clabel htmlFor=\"name\"\u003eName\u003c/label\u003e\n\t\t\u003cinput id=\"name\" type=\"text\" name=\"text\" /\u003e\n\n\t\t\u003clabel htmlFor=\"surname\"\u003eSurname\u003c/label\u003e\n\t\t\u003cinput id=\"surname\" type=\"text\" name=\"surname\" /\u003e\n\t\t\n\t\t\u003clabel htmlFor=\"email\"\u003eEmail\u003c/label\u003e\n\t\t\u003cinput id=\"email\" type=\"email\" name=\"email\" /\u003e\n\t\t\n\t\t\u003clabel htmlFor=\"message\"\u003eMessage\u003c/label\u003e\n\t\t\u003ctextarea id=\"message\" name=\"message\" /\u003e\n\t\t\n\t\t\u003cbutton type=\"submit\"\u003eSend\u003c/button\u003e\n    \u003c/form\u003e\n  );\n}\n```\n\n\n### Example with Extra Data\n\n```js\nimport { useForm } from '@formcarry/react';\n\nfunction MyFormcarry() {\n  // Call the `useForm` hook in your function component\n  const {state, submit} = useForm({\n\tid: 'Your-Form-ID-From-Formcarry',\n\textraData: {\n\t\t// add whatever you want\n\t\tscreenSize: `${window.screen.width}x${window.screen.height}`,\n\t\tlanguage: window.navigator.language,\n\t}\n  });\n\n  ...\n}\n```\n\n\nYou can pass those to `useForm`:\n\n| Key         \t| Description                                                   |\n| :-----------\t| :------------------------------------------------------------ |\n| `id`\t\t\t| Your Form ID, which you can get it from [formcarry](https://formcarry.com) |\n| `debug`\t\t| Boolean, it prints out logs to the console, true by default |\n| `extraData`\t| Accepts object, it will mix those object with form fields |\n\n\n\nThe `state` object contains the following:\n\n| Key          | Description                                                   |\n| :----------- | :------------------------------------------------------------ |\n| `submitting` | A Boolean indicating whether the form is currently submitting |\n| `submitted`  | A Boolean indicating whether the form successfully submitted  |\n| `response`   | Returns formcarry successful response  |\n| `error`      | Returns formcarry error\t\t\t\t                    |\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fformcarry%2Fformcarry-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fformcarry%2Fformcarry-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fformcarry%2Fformcarry-react/lists"}