{"id":22098507,"url":"https://github.com/reeli/react-rx-form","last_synced_at":"2025-07-24T22:33:39.169Z","repository":{"id":46294200,"uuid":"142850433","full_name":"reeli/react-rx-form","owner":"reeli","description":"Rx form for react, high performance, subscription-based form state management.","archived":false,"fork":false,"pushed_at":"2021-11-06T14:46:51.000Z","size":2551,"stargazers_count":10,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-05-27T21:17:30.133Z","etag":null,"topics":["form","forms","observer","react","rx","rxjs","typescript"],"latest_commit_sha":null,"homepage":"https://reeli.github.io/react-rx-form/","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/reeli.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":"2018-07-30T08:55:49.000Z","updated_at":"2021-11-06T14:44:40.000Z","dependencies_parsed_at":"2022-08-25T19:41:45.056Z","dependency_job_id":null,"html_url":"https://github.com/reeli/react-rx-form","commit_stats":null,"previous_names":["helloruili/react-rx-form"],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reeli%2Freact-rx-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reeli%2Freact-rx-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reeli%2Freact-rx-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reeli%2Freact-rx-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reeli","download_url":"https://codeload.github.com/reeli/react-rx-form/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227482719,"owners_count":17780040,"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","forms","observer","react","rx","rxjs","typescript"],"created_at":"2024-12-01T04:20:20.112Z","updated_at":"2024-12-01T04:20:20.729Z","avatar_url":"https://github.com/reeli.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Rx Form \n\n![Build Status](https://github.com/reeli/react-rx-form/actions/workflows/deploy.yml/badge.svg)\n[![codecov](https://codecov.io/gh/reeli/react-rx-form/branch/master/graph/badge.svg?style=flat-square)](https://codecov.io/gh/reeli/react-rx-form)\n[![License](https://img.shields.io/npm/l/@react-rx/form.svg?style=flat-square)](https://npmjs.org/package/@react-rx/form)\n\nAs you know, form is a little bit annoying in `React`. RxForm is a small library that help you:\n\n1. Maintain Form state\n2. Validation and error messages\n3. Handling form submission\n\nCompare with Redux Form:\n\n1. Your can use it directly in your project, no need any config.\n2. It's more friendly to Typescript.\n\n\u003e If you dont' want to use it someday, it is convenient to switch to redux-form. Because their interfaces are the same. So don't worry, just give it a try!\n  \n\n### Install [![NPM](https://img.shields.io/npm/v/@react-rx/form.svg?style=flat-square)](https://npmjs.org/package/@react-rx/form)\n\n`npm install @react-rx/form`\n\n### Usage\n\n```ts\nimport React, { Component } from \"react\";\nimport { Field, RxForm } from \"@react-rx/form\";\n\nexport class ContactForm extends Component {\n  onSubmit = (formValues: any) =\u003e {\n    console.log(formValues);\n  };\n\n  render() {\n    return (\n      \u003cRxForm\u003e\n        {({ handleSubmit }) =\u003e (\n          \u003cform onSubmit={handleSubmit(this.onSubmit)}\u003e\n            \u003cField name=\"firstName\"\u003e\n              {({ value, onChange }) =\u003e (\n                \u003cinput value={value} onChange={onChange} type=\"text\" placeholder=\"First Name\" /\u003e\n              )}\n            \u003c/Field\u003e\n            \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n          \u003c/form\u003e\n        )}\n      \u003c/RxForm\u003e\n    );\n  }\n}\n```\n## Examples\n\nPlease check more examples [here](http://react-rx-form.surge.sh).\n\n## API\n\n### `RxForm`\n\nThe Form component which maintain all fields state.\n\n- `initialValues: { [fieldName: string]: TFieldValue }`\n\n  Form initial values.\n\n- `children: (props) =\u003e ReactNode`\n\n  A render prop, which provide the following props to it's children:\n\n  - `handleSubmit: (onSubmit: TOnSubmit) =\u003e (formEvent: React.FormEvent) =\u003e any`\n\n  - When `handleSubmit` function fired, `onSubmit` will be called with the following parameters: \n \t - `values: { [fieldName: string]: TFieldValue }`\n \t - `onSubmitError: (errors: { [fieldName: string]: TErrorMsg }) =\u003e any`\n\n### `Field`\n\nThe Field Component is connect each individual input to RxForm.\n\n- `name: string`\n  \n  Field name\n  \n- `children: (props) =\u003e ReactNode`\n\n  A render prop, which provide the flowing props to it's children:\n\n\t- `name: string`\n\t- `onChange: (value: React.MouseEvent | TFieldValue) =\u003e void`\n\t- `onBlur: (value: React.MouseEvent | TFieldValue) =\u003e void`\n\t- `onFocus: () =\u003e void`\n\t- `value?: TFieldValue`\n\t- `meta`\n\t  - `dirty?: boolean`\n\t  - `touched?: boolean`\n\t  - `visited?: boolean`\n\t  - `error?: TErrorMsg`\n\n- `defaultValue?: TFieldValue` \n\t\n\tField default value\n\t\n- `validate?: TValidator | TValidator[]`\n\t- TValidator is a function which returns error message based on field value. \n\t\t- `(value: TFieldValue) =\u003e string | undefined` \n\t- Default be called when field `onChange` and form `startSubmit`\n\n- `format?: (value: TFieldValue) =\u003e TFieldValue`\n  \n  Format field value to be displayed in field input. For example, we can format number to currency. Should be used with `parse` in pairs. For example, covert numbers into currencies(`format(10000) =\u003e 10,000$`). \n  \n- `parse?: (value: TFieldValue) =\u003e TFieldValue`\n  \n  Parse field input display value to be stored in RxForm. Should be used with `format` in pairs. For example, covert currencies into numbers(`parse(10,000$) =\u003e 10000`).\n  \n- `normalize?: (value: TFieldValue) =\u003e TFieldValue` \n  \n  Convert whatever the user has entered into the value that you want display in the Field and store in RxForm. For example, covert user inputs to be in all uppercase(`normalize(value) =\u003e value.toUppercase()`)    \n  \n- `destroyValueOnUnmount?: boolean` \n\n \tWhen field unmount, determine whether to destroy the field value or not.\n \t\n### `FieldArray`\n\n - `name: string`\n\t - \tField array name.\n- `children: (props) =\u003e ReactNode`\n\t \n\t A render prop, which provide the flowing props to it's children:\n\t \n\t- `add: () =\u003e any`\n\t\t- Add an item to the end of the array.\n\t- `remove: (idx: number) =\u003e any`\n\t\t- Removes an item from the array by index.\n\t- `each: (mapper: (fieldName: string, idx: number) =\u003e React.ReactNode) =\u003e React.ReactNode`\n\t\t- A method to iterate over each value of the array.\n - `initLength?: number`\n\t \n\t The init length of the array.\n\t \n### `FormSection`\n\nThe FormSection component makes it easy to split forms into smaller components that are reusable across multiple forms. It does this by prefixing the name of Field, FieldArray children, at any depth, with the value specified in the name prop.\n\n-  `name: string`\n\n\tThe name all child fields should be prefixed with.\n\t\n-  `children: React.ReactNode`\n\t \n### `FormValues`\n\nThe FormValues component provides form values to it's children.\n\n- `children: (props) =\u003e ReactNode`\n\n\tA render prop, which provide the flowing props to it's children:\n\t\n\t- `formValues: { [fieldName: string]: TFieldValue }`\n   - `updateFormValues: (formValues: IFormValues) =\u003e any`\n\n### `WithForm`\n\nThe WithForm components provide form context to it's children.\n\n- `children: (props) =\u003e ReactNode`\n\n\tA render prop, which provide the flowing props to it's children:\n\n  - `dispatch: (fieldAction: IFieldAction) =\u003e any`\n  - `subscribe: (observer: Observer\u003cany\u003e) =\u003e any`\n  - `subscribeFormAction: (observer: Observer\u003cany\u003e) =\u003e any`\n  - `updateFormValues: (formValues: IFormValues) =\u003e any`\n  - `getFormValues: () =\u003e IFormValues`\n  - `getFormState: () =\u003e IFormState`\n  - `fieldPrefix?: string`\n  - `setErrors: (errors: TErrors) =\u003e any`\n\n\n## Data Flow\n\n![rx-form-flow](./docs/rx-form-flow.svg)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freeli%2Freact-rx-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freeli%2Freact-rx-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freeli%2Freact-rx-form/lists"}