{"id":23512768,"url":"https://github.com/baethon/polaris-form-hook","last_synced_at":"2026-07-29T07:31:28.144Z","repository":{"id":179978424,"uuid":"662317241","full_name":"baethon/polaris-form-hook","owner":"baethon","description":"Simple form hook for @shopify/polaris","archived":false,"fork":false,"pushed_at":"2023-07-14T21:58:49.000Z","size":169,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-16T21:18:10.357Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/baethon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null}},"created_at":"2023-07-04T21:30:02.000Z","updated_at":"2023-07-09T21:11:01.000Z","dependencies_parsed_at":null,"dependency_job_id":"3c3368ee-ed97-4fda-a525-15db843a3754","html_url":"https://github.com/baethon/polaris-form-hook","commit_stats":null,"previous_names":["baethon/polaris-form-hook"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baethon%2Fpolaris-form-hook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baethon%2Fpolaris-form-hook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baethon%2Fpolaris-form-hook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baethon%2Fpolaris-form-hook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/baethon","download_url":"https://codeload.github.com/baethon/polaris-form-hook/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254012556,"owners_count":21999285,"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":"2024-12-25T13:19:24.516Z","updated_at":"2025-10-13T15:15:46.252Z","avatar_url":"https://github.com/baethon.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @baethon/polaris-form-hook\n\nReact hook for form state management in [@shopify/polaris](https://github.com/Shopify/polaris). It eliminates the necessity for individual `useState` and `useCallback` for each form field and simplifies form data management.\n\n## Example ([codesandbox](https://codesandbox.io/s/nervous-paper-5gwtq5?file=/App.tsx))\n\nBased on the [original example](https://codesandbox.io/s/fjq5vy?module=App.tsx) from Polaris docs.\n\n```js\nimport {Form, FormLayout, Checkbox, TextField, Button} from '@shopify/polaris';\nimport {useCallback} from 'react';\nimport {useForm} from '@baethon/polaris-form-hook';\n\nfunction FormOnSubmitExample() {\n  const form = useForm({\n    newsletter: false,\n    email: '',\n  );\n  \n  const handleSubmit = useCallback(() =\u003e {\n    form.reset();\n  }, []);\n\n  return (\n    \u003cForm onSubmit={handleSubmit}\u003e\n      \u003cFormLayout\u003e\n        \u003cCheckbox\n          label=\"Sign up for the Polaris newsletter\"\n          {...form.register.checked('newsletter')}\n        /\u003e\n\n        \u003cTextField\n          {...form.register.value('email')}\n          label=\"Email\"\n          type=\"email\"\n          autoComplete=\"email\"\n          helpText={\n            \u003cspan\u003e\n              We’ll use this email address to inform you on future changes to\n              Polaris.\n            \u003c/span\u003e\n          }\n        /\u003e\n\n        \u003cButton submit\u003eSubmit\u003c/Button\u003e\n      \u003c/FormLayout\u003e\n    \u003c/Form\u003e\n  );\n}\n```\n\n## Installation\n\n```bash\nnpm i @baethon/polaris-form-hook\n```\n\n## Usage\n\n### Initializing the form\n\nImport `useForm` from `@baethon/polaris-form-hook`:\n\n```js\nimport {useForm} from '@baethon/polaris-form-hook';\n```\n\nThe function takes one argument - object with initial form data:\n\n```js\nconst form = useForm({\n    first_name: '',\n    last_name: '',\n});\n```\n\nYou have to pass all fields that will be used in the form.\n\n### Binding with Polaris\n\nThe `form` object (created by `useForm()`) contains a `register` property.  \nIt's an object containing factory methods that should be used to bind a field with Polaris component.\n\nPolaris is inconsistent in names of the value properties. Depending on the component, it will use `value`, `selected`, or `checked` properties to pass the values. The `register` object will have a method for each of them. \n\nThe factory method will generate two properties: `value` (or `selected`, `checked`) and `onChange()`.\n\n```js\nconst form = useForm({\n    first_name: '',\n    accept_terms: false,\n    company_name: [],\n});\n\n(\n  \u003cTextField label=\"First name\" {...form.register.value('first_name')} /\u003e\n  \u003cCheckbox label=\"Accept Terms\" {...form.register.checked('accept_terms')} /\u003e\n  \u003cChoiceList\n      title=\"Company name\"\n      choices={[\n        {label: 'Hidden', value: 'hidden'},\n        {label: 'Optional', value: 'optional'},\n        {label: 'Required', value: 'required'},\n      ]}\n      {...form.register.selected('company_name')\n    /\u003e\n)\n```\n\n### Accessing form data\n\nTo access the form data, use `form.data`.\n\n```js\nconst form = useForm({\n    first_name: '',\n    accept_terms: false,\n    company_name: [],\n});\n\nconsole.log(form.data.first_name);\n```\n\n### Updating fields\n\nYou can update a single field using:\n\n```js\nform.setField('first_name', 'Jon');\n```\n\nOr by passing an object that will be merged with the form data:\n\n```js\nform.update({ last_name: 'Snow' });\n```\n\nTo reset the form use:\n\n```js\nform.reset();\n```\n\n`reset()` will use the initial form data.\n\n## Testing\n\n```bash\nnpm test\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaethon%2Fpolaris-form-hook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbaethon%2Fpolaris-form-hook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaethon%2Fpolaris-form-hook/lists"}