{"id":16490181,"url":"https://github.com/jschr/form-provider","last_synced_at":"2025-04-15T18:41:40.246Z","repository":{"id":10159891,"uuid":"64572130","full_name":"jschr/form-provider","owner":"jschr","description":"React components for building forms and managing state. ","archived":false,"fork":false,"pushed_at":"2022-12-06T23:17:29.000Z","size":340,"stargazers_count":1,"open_issues_count":30,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-12T03:46:33.060Z","etag":null,"topics":["react","react-forms","react-helpers","redux"],"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/jschr.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}},"created_at":"2016-07-31T01:53:54.000Z","updated_at":"2017-05-06T06:27:25.000Z","dependencies_parsed_at":"2023-01-13T15:46:28.829Z","dependency_job_id":null,"html_url":"https://github.com/jschr/form-provider","commit_stats":null,"previous_names":["jschr/react-redux-form-provider","jschr/react-redux-local-form"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jschr%2Fform-provider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jschr%2Fform-provider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jschr%2Fform-provider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jschr%2Fform-provider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jschr","download_url":"https://codeload.github.com/jschr/form-provider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248514212,"owners_count":21116899,"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":["react","react-forms","react-helpers","redux"],"created_at":"2024-10-11T13:46:54.493Z","updated_at":"2025-04-15T18:41:40.220Z","avatar_url":"https://github.com/jschr.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# form-provider\n\n[![npm](https://img.shields.io/npm/v/form-provider.svg)](https://www.npmjs.com/package/form-provider)\n[![Build Status](https://img.shields.io/travis/jschr/form-provider/master.svg)](https://travis-ci.org/jschr/form-provider)\n\nA set of React helpers to help with building forms. State is managed with a Redux store that is local to your component. This promotes keeping your [ui state separate from your global application state](https://github.com/reactjs/redux/issues/1287#issuecomment-175351978) while still being able to use the redux ecosystem.\n\nDemos:\n  * [Basic Example](http://form-provider-basic-example.surge.sh/)\n\n## Installation\n\n```bash\nnpm install --save react react-dom redux react-redux # peer dependencies\nnpm install --save form-provider\n```\n\n## Basic Usage\n\n```js\n// BasicForm.js\nimport { withForm, FormProvider, Field } from 'form-provider'\n\nfunction createForm(props) {\n  return {\n    field1: props.field1,\n    obj: {\n      field2: 4\n    }\n  }\n}\n\nfunction BasicForm({ form, onSubmit }) {\n  return (\n    \u003cFormProvider form={form} onSubmit={onSubmit}\u003e\n      \u003cform onSubmit={preventDefault(form.submit)}\u003e\n        \u003ch3\u003eBasic Form\u003c/h3\u003e\n        \u003cField path='field1' validate={[isRequired('Field1'), isNotNumber('Field1')]}\u003e\n          {({ value, setValue, error }) =\u003e\n            \u003cdiv\u003e\n              \u003clabel\u003eField1*\u003c/label\u003e\n              \u003cinput type='text' value={value} onChange={target(setValue)} /\u003e\n              { error \u0026\u0026 \u003cdiv\u003e{ error.message }\u003c/div\u003e }\n            \u003c/div\u003e\n          }\n        \u003c/Field\u003e\n        \u003cField path='obj.field2'\u003e\n          {({ value, setValue }) =\u003e\n            \u003cdiv\u003e\n              \u003clabel\u003eField2\u003c/label\u003e\n              \u003cinput type='number' value={value} onChange={target(toNumber(setValue)))} /\u003e\n            \u003c/div\u003e\n          }\n        \u003c/Field\u003e\n        \u003cbutton type='submit'\u003eSave\u003c/button\u003e\u0026nbsp;\n        \u003cbutton type='button' onClick={form.reset}\u003eReset\u003c/button\u003e\n      \u003c/form\u003e\n    \u003c/FormProvider\u003e\n  )\n}\n\nexport default withForm(createForm)(BasicForm)\n\n```\n\nCheck out the [basic form example](examples/basic) for the entire source.\n\n## Initial state\n\nSetting initial form state is done by passing it into `withForm`\n\n```js\n...\n\nexport default withForm({\n  user: {\n    firstName: 'john'\n  }\n})(BasicForm)\n\n// or as a function of props\nexport default withForm(props =\u003e ({\n  user: props.user\n}))(BasicForm)\n\n```\n\n## Validation\n\nThis lib currently doesn't provide any validation functions out of the box, only an API to provide your own. Validators are functions that accept the current value and return a promise. Pass in a single validator or an array to the `\u003cField\u003e` component. The form won't submit until all validators are resolved.\n\n```js\n// validators.js\n\nexport const isRequired = (name) =\u003e (value) =\u003e new Promise((resolve, reject) =\u003e {\n  if (!value) return reject(new Error(`${name} is required`))\n  resolve()\n})\n\nexport const isNotNumber = (name) =\u003e (value) =\u003e new Promise((resolve, reject) =\u003e {\n  if (!isNaN(value)) return reject(new Error(`${name} must not be a number`))\n  resolve()\n})\n\n```\n\n## Binding to form state\n\nUse the `connectForm` function to map form state to props. This function has the exact same API as react-redux's `connect` function. You can use this to conditionally display fields or other rendering logic based on the current form's state.\n\n```js\nimport { compose } from 'redux'\nimport { withForm, FormProvider, Field, connectForm } from 'form-provider'\n\nfunction mapFormStateToProps(formState) {\n  return {\n    userFormState: formState.user,\n    allErrors: formState.errors\n  }\n}\n\nfunction BasicForm({ userFormState, allErrors, form, onSubmit }) {\n  ...\n})\n\nexport default compose(\n  withForm(createForm)\n  connectForm(mapFormStateToProps)\n)(withForm)\n\n```\n\n## Alternatives\n\n- [React Redux Form](https://github.com/davidkpiano/react-redux-form): Personal favourite, similar API.\n- [Redux Form](https://github.com/erikras/redux-form): More features out of the box, mature and popular.\n- [React Forms](https://github.com/prometheusresearch/react-forms): Validate with JSONSchema, no redux dependency\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjschr%2Fform-provider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjschr%2Fform-provider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjschr%2Fform-provider/lists"}