{"id":13516974,"url":"https://github.com/react-component/form","last_synced_at":"2025-05-14T04:05:56.228Z","repository":{"id":38240067,"uuid":"47617694","full_name":"react-component/form","owner":"react-component","description":"React High Order Form Component(web \u0026 react-native)","archived":false,"fork":false,"pushed_at":"2021-12-23T10:06:13.000Z","size":21684,"stargazers_count":1810,"open_issues_count":111,"forks_count":296,"subscribers_count":47,"default_branch":"master","last_synced_at":"2025-05-10T23:03:24.252Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://react-component.github.io/form/","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/react-component.png","metadata":{"files":{"readme":"README.md","changelog":"HISTORY.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-12-08T11:21:07.000Z","updated_at":"2025-05-10T21:46:19.000Z","dependencies_parsed_at":"2022-08-09T01:17:02.646Z","dependency_job_id":null,"html_url":"https://github.com/react-component/form","commit_stats":null,"previous_names":[],"tags_count":95,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Fform","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Fform/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Fform/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Fform/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-component","download_url":"https://codeload.github.com/react-component/form/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254069212,"owners_count":22009508,"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-08-01T05:01:27.988Z","updated_at":"2025-05-14T04:05:56.181Z","avatar_url":"https://github.com/react-component.png","language":"JavaScript","readme":"# rc-form\n\nReact High Order Form Component.\n\n[![NPM version][npm-image]][npm-url]\n[![build status][travis-image]][travis-url]\n[![Test coverage][coveralls-image]][coveralls-url]\n[![gemnasium deps][gemnasium-image]][gemnasium-url]\n[![node version][node-image]][node-url]\n[![npm download][download-image]][download-url]\n[![Code Quality: Javascript][lgtm-badge]][lgtm-badge-url]\n[![Total alerts][lgtm-alerts]][lgtm-alerts-url]\n\n[npm-image]: http://img.shields.io/npm/v/rc-form.svg?style=flat-square\n[npm-url]: http://npmjs.org/package/rc-form\n[travis-image]: https://img.shields.io/travis/react-component/form.svg?style=flat-square\n[travis-url]: https://travis-ci.org/react-component/form\n[coveralls-image]: https://img.shields.io/coveralls/react-component/form.svg?style=flat-square\n[coveralls-url]: https://coveralls.io/r/react-component/form?branch=master\n[gemnasium-image]: http://img.shields.io/gemnasium/react-component/form.svg?style=flat-square\n[gemnasium-url]: https://gemnasium.com/react-component/form\n[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square\n[node-url]: http://nodejs.org/download/\n[download-image]: https://img.shields.io/npm/dm/rc-form.svg?style=flat-square\n[download-url]: https://npmjs.org/package/rc-form\n[lgtm-badge]: https://img.shields.io/lgtm/grade/javascript/g/react-component/form.svg?logo=lgtm\u0026logoWidth=18\n[lgtm-badge-url]: https://lgtm.com/projects/g/react-component/form/context:javascript\n[lgtm-alerts]: https://img.shields.io/lgtm/alerts/g/react-component/form.svg?logo=lgtm\u0026logoWidth=18\n[lgtm-alerts-url]: https://lgtm.com/projects/g/react-component/form/alerts\n\n## Development\n\n```\nnpm install\nnpm start\nopen http://localhost:8000/examples/\n```\n\n## Feature\n\n* Support react.js and even react-native\n* Validate fields with [async-validator](https://github.com/yiminghe/async-validator/)\n\n## Install\n\n[![rc-form](https://nodei.co/npm/rc-form.png)](https://npmjs.org/package/rc-form)\n\n## Usage\n\n```js\nimport { createForm, formShape } from 'rc-form';\n\nclass Form extends React.Component {\n  static propTypes = {\n    form: formShape,\n  };\n\n  submit = () =\u003e {\n    this.props.form.validateFields((error, value) =\u003e {\n      console.log(error, value);\n    });\n  }\n\n  render() {\n    let errors;\n    const { getFieldProps, getFieldError } = this.props.form;\n    return (\n      \u003cdiv\u003e\n        \u003cinput {...getFieldProps('normal')}/\u003e\n        \u003cinput {...getFieldProps('required', {\n          onChange(){}, // have to write original onChange here if you need\n          rules: [{required: true}],\n        })}/\u003e\n        {(errors = getFieldError('required')) ? errors.join(',') : null}\n        \u003cbutton onClick={this.submit}\u003esubmit\u003c/button\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nexport createForm()(Form);\n```\n\n### Use with React Native\n\nExpo preview   \n\n![avatar](./examples/react-native/expo.jpg)\n\n[View the source code](./examples/react-native/App.js)\n\nOr a quicker version:\n\n```js\nimport { createForm } from 'rc-form';\n\nclass Form extends React.Component {\n  componentWillMount() {\n    this.requiredDecorator = this.props.form.getFieldDecorator('required', {\n      rules: [{required: true}],\n    });\n  }\n\n  submit = () =\u003e {\n    this.props.form.validateFields((error, value) =\u003e {\n      console.log(error, value);\n    });\n  }\n\n  render() {\n    let errors;\n    const { getFieldError } = this.props.form;\n    return (\n      \u003cdiv\u003e\n        {this.requiredDecorator(\n          \u003cinput\n            onChange={\n              // can still write your own onChange\n            }\n          /\u003e\n        )}\n        {(errors = getFieldError('required')) ? errors.join(',') : null}\n        \u003cbutton onClick={this.submit}\u003esubmit\u003c/button\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nexport createForm()(Form);\n```\n\n## createForm(option: Object) =\u003e (WrappedComponent: React.Component) =\u003e React.Component\n\n| Option    | Description                              | Type       | Default |\n|-----------|------------------------------------------|------------|---------|\n| option.validateMessages | Preseted messages of [async-validator](https://github.com/yiminghe/async-validator) | Object | {} |\n| option.onFieldsChange | Called when field changed, you can dispatch fields to redux store. | (props, changed, all): void | NOOP |\n| option.onValuesChange | Called when value changed. | (props, changed, all): void | NOOP |\n| option.mapProps | Get new props transferred to WrappedComponent. | (props): Object | props =\u003e props |\n| option.mapPropsToFields | Convert value from props to fields. Used for read fields from redux store. | (props): Object | NOOP |\n| option.fieldNameProp | Where to store the `name` argument of `getFieldProps`. | String | - |\n| option.fieldMetaProp | Where to store the meta data of `getFieldProps`. | String | - |\n| option.fieldDataProp | Where to store the field data | String | - |\n| option.withRef(deprecated) | Maintain an ref for wrapped component instance, use `refs.wrappedComponent` to access. | boolean | false |\n\n### Note: use wrappedComponentRef instead of withRef after rc-form@1.4.0\n\n```jsx\nclass Form extends React.Component { ... }\n\n// deprecated\nconst EnhancedForm = createForm({ withRef: true })(Form);\n\u003cEnhancedForm ref=\"form\" /\u003e\nthis.refs.form.refs.wrappedComponent // =\u003e The instance of Form\n\n// Recommended\nconst EnhancedForm = createForm()(Form);\n\u003cEnhancedForm wrappedComponentRef={(inst) =\u003e this.formRef = inst} /\u003e\nthis.formRef // =\u003e The instance of Form\n```\n\n## (WrappedComponent: React.Component) =\u003e React.Component\n\nThe returned function of createForm(). It will pass an object as prop `form` with the following members to WrappedComponent:\n\n### getFieldProps(name, option): Object { [valuePropName], [trigger], [validateTrigger] }\n\nWill create props which can be set on a input/InputComponent which support value and onChange interface.\n\nAfter set, this will create a binding with this input.\n\n```jsx\n\u003cform\u003e\n  \u003cinput {...getFieldProps('name', { ...options })} /\u003e\n\u003c/form\u003e\n```\n\n#### name: String\n\nThis input's unique name.\n\n#### option: Object\n\n| Option    | Description                              | Type       | Default |\n|-----------|------------------------------------------|------------|---------|\n| option.valuePropName | Prop name of component's value field, eg: checkbox should be set to `checked` ... | String | 'value' |\n| option.getValueProps | Get the component props according to field value. | (value): Object | (value) =\u003e ({ value }) |\n| option.getValueFromEvent | Specify how to get value from event. | (e): any | See below |\n| option.initialValue | Initial value of current component. | any | - |\n| option.normalize | Return normalized value. | (value, prev, all): Object | - |\n| option.trigger | Event which is listened to collect form data. | String | 'onChange' |\n| option.validateTrigger | Event which is listened to validate. Set to falsy to only validate when call props.validateFields. | String|String[] | 'onChange' |\n| option.rules | Validator rules. see: [async-validator](https://github.com/yiminghe/async-validator) | Object[] | - |\n| option.validateFirst | Whether stop validate on first rule of error for this field. | boolean | false |\n| option.validate | | Object[] | - |\n| option.validate[n].trigger | Event which is listened to validate. Set to falsy to only validate when call props.validateFields. | String|String[] | 'onChange' |\n| option.validate[n].rules | Validator rules. see: [async-validator](https://github.com/yiminghe/async-validator) | Object[] | - |\n| option.hidden | Ignore current field while validating or gettting fields | boolean | false |\n| option.preserve | Whether to preserve the value. That will remain the value when the field be unmounted and be mounted again | boolean | false |\n\n##### Default value of `getValueFromEvent`\n\n```js\nfunction defaultGetValueFromEvent(e) {\n  if (!e || !e.target) {\n    return e;\n  }\n  const { target } = e;\n  return target.type === 'checkbox' ? target.checked : target.value;\n}\n```\n\n##### Tips\n\n```js\n{\n  validateTrigger: 'onBlur',\n  rules: [{required: true}],\n}\n// is the shorthand of\n{\n  validate: [{\n    trigger: 'onBlur',\n    rules: [{required: true}],\n  }],\n}\n```\n\n### getFieldDecorator(name:String, option: Object) =\u003e (React.Node) =\u003e React.Node\n\nSimilar to `getFieldProps`, but add some helper warnings and you can write onXX directly inside React.Node props:\n\n```jsx\n\u003cform\u003e\n  {getFieldDecorator('name', otherOptions)(\u003cinput /\u003e)}\n\u003c/form\u003e\n```\n\n### getFieldsValue([fieldNames: String[]])\n\nGet fields value by fieldNames.\n\n### getFieldValue(fieldName: String)\n\nGet field value by fieldName.\n\n### getFieldInstance(fieldName: String)\n\nGet field react public instance by fieldName.\n\n### setFieldsValue(obj: Object)\n\nSet fields value by kv object.\n\n### setFieldsInitialValue(obj: Object)\n\nSet fields initialValue by kv object. use for reset and initial display/value.\n\n### setFields(obj: Object)\n\nSet fields by kv object. each field can contain errors and value member.\n\n### validateFields([fieldNames: String[]], [options: Object], callback: (errors, values) =\u003e void)\n\nValidate and get fields value by fieldNames.\n\noptions is the same as validate method of [async-validator](https://github.com/yiminghe/async-validator).\nAnd add `force`.\n\n#### options.force: Boolean\n\nDefaults to false. Whether to validate fields which have been validated(caused by validateTrigger).\n\n### getFieldsError(names): Object{ [name]: String[] }\n\nGet inputs' validate errors.\n\n### getFieldError(name): String[]\n\nGet input's validate errors.\n\n### isFieldValidating(name: String): Bool\n\nWhether this input is validating.\n\n### isFieldsValidating(names: String[]): Bool\n\nWhether one of the inputs is validating.\n\n### isFieldTouched(name: String): Bool\n\nWhether this input's value had been changed by user.\n\n### isFieldsTouched(names: String[]): Bool\n\nWhether one of the inputs' values had been changed by user.\n\n### resetFields([names: String[]])\n\nReset specified inputs. Defaults to all.\n\n### isSubmitting(): Bool (Deprecated)\n\nWhether the form is submitting.\n\n### submit(callback: Function) (Deprecated)\n\nCause isSubmitting to return true, after callback called, isSubmitting return false.\n\n\n## rc-form/lib/createDOMForm(option): Function\n\ncreateDOMForm enhancement, support props.form.validateFieldsAndScroll\n\n### validateFieldsAndScroll([fieldNames: String[]], [options: Object], callback: (errors, values) =\u003e void)\n\nprops.form.validateFields enhancement, support scroll to the first invalid form field,  `scroll` is the same as [dom-scroll-into-view's function parameter `config`](https://github.com/yiminghe/dom-scroll-into-view#function-parameter).\n\n#### options.container: HTMLElement\n\nDefaults to first scrollable container of form field(until document).\n\n\n## Notes\n\n- Do not use stateless function component inside Form component: https://github.com/facebook/react/pull/6534\n\n- you can not set same prop name as the value of validateTrigger/trigger for getFieldProps\n\n```js\n\u003cinput {...getFieldProps('change',{\n  onChange: this.iWantToKnow // you must set onChange here or use getFieldDecorator to write inside \u003cinput\u003e\n})}\u003e\n```\n\n- you can not use ref prop for getFieldProps\n\n```js\n\u003cinput {...getFieldProps('ref')} /\u003e\n\nthis.props.form.getFieldInstance('ref') // use this to get ref\n```\n\nor\n\n```js\n\u003cinput {...getFieldProps('ref',{\n  ref: this.saveRef // use function here or use getFieldDecorator to write inside \u003cinput\u003e (only allow function)\n})} /\u003e\n```\n\n## Test Case\n\n```\nnpm test\nnpm run chrome-test\n```\n\n## Coverage\n\n```\nnpm run coverage\n```\n\nopen coverage/ dir\n\n## License\n\nrc-form is released under the MIT license.\n","funding_links":[],"categories":["JavaScript","📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-component%2Fform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-component%2Fform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-component%2Fform/lists"}