{"id":16791343,"url":"https://github.com/jsun969/just-submit","last_synced_at":"2025-03-17T03:30:37.390Z","repository":{"id":213719901,"uuid":"734767461","full_name":"jsun969/just-submit","owner":"jsun969","description":"🛫 Submit simple form, with safe types, without management!","archived":false,"fork":false,"pushed_at":"2024-08-12T13:15:21.000Z","size":126,"stargazers_count":23,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-14T08:34:37.198Z","etag":null,"topics":["form","react","submit","vanilla"],"latest_commit_sha":null,"homepage":"https://npm.im/just-submit","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/jsun969.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":"2023-12-22T15:02:50.000Z","updated_at":"2024-09-04T14:34:08.000Z","dependencies_parsed_at":"2024-08-12T16:00:15.901Z","dependency_job_id":null,"html_url":"https://github.com/jsun969/just-submit","commit_stats":null,"previous_names":["jsun969/submit-form"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsun969%2Fjust-submit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsun969%2Fjust-submit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsun969%2Fjust-submit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsun969%2Fjust-submit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsun969","download_url":"https://codeload.github.com/jsun969/just-submit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221671268,"owners_count":16861227,"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","react","submit","vanilla"],"created_at":"2024-10-13T08:34:36.902Z","updated_at":"2024-10-27T11:50:49.522Z","avatar_url":"https://github.com/jsun969.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# 🛫 Just Submit\n\nSubmit simple form, with safe types, without management!\n\n[![version](https://img.shields.io/npm/v/just-submit?style=for-the-badge)](https://www.npmjs.com/package/just-submit)\n[![license](https://img.shields.io/npm/l/just-submit?style=for-the-badge)](https://github.com/jsun969/just-submit/blob/dev/LICENSE)\n[![size](https://img.shields.io/bundlephobia/minzip/just-submit?style=for-the-badge)](https://bundlephobia.com/result?p=just-submit)\n[![downloads](https://img.shields.io/npm/dw/just-submit?style=for-the-badge)](https://www.npmjs.com/package/just-submit)\n\n\u003c/div\u003e\n\n## ✨ Features\n\n- 🔒 TYPE SAFE\n- ⚡ Speedy DX\n- 👶 Beginner-Friendly\n- 🧪 Well-Tested\n- 🍃 Ultra Light\n- 🧩 Framework-Agnostic\n\n## 📦 Install\n\n```bash\npnpm add just-submit\n```\n\n## 🎯 Quickstart\n\n\u003e [!IMPORTANT]  \n\u003e Don't forget to add a **default value** for **optional** fields.\n\n```ts\nconst handleSubmit = createSubmit({\n  fullName: 'string',\n  age: 'number',\n  birthday: 'date',\n  wantGift: 'boolean',\n});\n\n// Inside form submit event handler\nhandleSubmit((data) =\u003e {\n  //          ^ { fullName: string; age: number; birthday: Date; wantGift: boolean }\n});\n```\n\n## 📚 Examples\n\n### React\n\n```tsx\nimport { createSubmit } from 'just-submit';\n\nconst Form = () =\u003e {\n  const handleSubmit = createSubmit({\n    fullName: 'string',\n    age: 'number',\n    birthday: 'date',\n    wantGift: 'boolean',\n  });\n  return (\n    \u003cform\n      onSubmit={handleSubmit((data) =\u003e {\n        // ...\n      })}\n    \u003e\n      \u003cinput type=\"text\" name=\"fullName\" required /\u003e\n      \u003cinput type=\"number\" name=\"age\" min={0} required /\u003e\n      \u003cinput type=\"date\" name=\"birthday\" defaultValue=\"2005-03-12\" /\u003e\n      \u003cinput type=\"checkbox\" name=\"wantGift\" /\u003e\n      \u003cbutton type=\"submit\"\u003eSUBMIT\u003c/button\u003e\n    \u003c/form\u003e\n  );\n};\n```\n\n### Vue\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { createSubmit } from 'just-submit';\n\nconst handleSubmit = createSubmit({\n  fullName: 'string',\n  age: 'number',\n  birthday: 'date',\n  wantGift: 'boolean',\n})((data) =\u003e {\n  // ...\n});\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cform @submit=\"handleSubmit\"\u003e\n    \u003cinput type=\"text\" name=\"fullName\" required /\u003e\n    \u003cinput type=\"number\" name=\"age\" min=\"0\" required /\u003e\n    \u003cinput type=\"date\" name=\"birthday\" value=\"2005-03-12\" /\u003e\n    \u003cinput type=\"checkbox\" name=\"wantGift\" /\u003e\n    \u003cbutton type=\"submit\"\u003eSUBMIT\u003c/button\u003e\n  \u003c/form\u003e\n\u003c/template\u003e\n```\n\n### Vanilla\n\n```html\n\u003cform\u003e\n  \u003cinput type=\"text\" name=\"fullName\" required /\u003e\n  \u003cinput type=\"number\" name=\"age\" min=\"0\" required /\u003e\n  \u003cinput type=\"date\" name=\"birthday\" value=\"2005-03-12\" /\u003e\n  \u003cinput type=\"checkbox\" name=\"wantGift\" /\u003e\n  \u003cbutton type=\"submit\"\u003eSUBMIT\u003c/button\u003e\n\u003c/form\u003e\n```\n\n```ts\nimport { createSubmit } from 'just-submit';\n\nconst handleSubmit = createSubmit({\n  fullName: 'string',\n  age: 'number',\n  birthday: 'date',\n  wantGift: 'boolean',\n});\nconst form = document.querySelector('form')!;\nform.addEventListener(\n  'submit',\n  handleSubmit((data) =\u003e {\n    // ...\n  }),\n);\n```\n\n### CDN\n\n```html\n\u003chead\u003e\n  \u003cscript src=\"https://unpkg.com/just-submit\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cform\u003e\n    \u003cinput type=\"text\" name=\"fullName\" required /\u003e\n    \u003cinput type=\"number\" name=\"age\" min=\"0\" required /\u003e\n    \u003cinput type=\"date\" name=\"birthday\" value=\"2005-03-12\" /\u003e\n    \u003cinput type=\"checkbox\" name=\"wantGift\" /\u003e\n    \u003cbutton type=\"submit\"\u003eSUBMIT\u003c/button\u003e\n  \u003c/form\u003e\n  \u003cscript\u003e\n    const { createSubmit } = JustSubmit;\n    const handleSubmit = createSubmit({\n      fullName: 'string',\n      age: 'number',\n      birthday: 'date',\n      wantGift: 'boolean',\n    });\n    const form = document.querySelector('form');\n    form.addEventListener(\n      'submit',\n      handleSubmit((data) =\u003e {\n        // ...\n      }),\n    );\n  \u003c/script\u003e\n\u003c/body\u003e\n```\n\n## 🔍 Troubleshooting\n\n### Form Field Converting Error\n\nThis library can only convert `string` values from `FormData`.\n\nFor **optional** fields, add a **default value** in case they are `null` in submission.\n\n### How to control form? (watch value changes / form state / etc.)\n\nThis library is for simple forms that don't need to be controlled.\n\nIf you are working on a complex form, try [the libraries here](#-thanks) instead.\n\n### Can I use it with ...(other framework) ?\n\nYou probably **CAN**! The `handleSubmit` function can be used in any submit event that has `preventDefault` and `currentTarget`.\n\nThe examples provided include only the frameworks that have passed our tests. If you find this library works with any other framework, please don't hesitate to **create a PR** for it. We greatly appreciate your contributions and support!\n\n## 🙏 Thanks\n\nDrawing inspiration and motivation from the following projects:\n\n- [react-hook-form](https://github.com/react-hook-form/react-hook-form) (React)\n- [vorm](https://github.com/Mini-ghost/vorms) (Vue)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsun969%2Fjust-submit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsun969%2Fjust-submit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsun969%2Fjust-submit/lists"}