{"id":15630704,"url":"https://github.com/kettanaito/react-advanced-form","last_synced_at":"2025-04-05T18:06:47.474Z","repository":{"id":46260102,"uuid":"104451122","full_name":"kettanaito/react-advanced-form","owner":"kettanaito","description":"Functional reactive forms. Multi-layer validation, custom styling, field grouping, reactive props, and much more.","archived":false,"fork":false,"pushed_at":"2021-11-03T17:44:11.000Z","size":5926,"stargazers_count":217,"open_issues_count":40,"forks_count":24,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-05-22T17:20:21.049Z","etag":null,"topics":["advanced-form","async-rule","async-validation","custom-styling","field","field-group","field-groups","form","form-provider","no-boilerplate","raf","react","react-advanced-form","react-form","reactive-props","rule","rx-props","validation","validation-messages","validation-rules"],"latest_commit_sha":null,"homepage":"https://redd.gitbook.io/react-advanced-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/kettanaito.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-22T08:31:53.000Z","updated_at":"2023-12-31T11:34:30.000Z","dependencies_parsed_at":"2022-09-25T04:52:00.116Z","dependency_job_id":null,"html_url":"https://github.com/kettanaito/react-advanced-form","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kettanaito%2Freact-advanced-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kettanaito%2Freact-advanced-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kettanaito%2Freact-advanced-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kettanaito%2Freact-advanced-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kettanaito","download_url":"https://codeload.github.com/kettanaito/react-advanced-form/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247378141,"owners_count":20929296,"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":["advanced-form","async-rule","async-validation","custom-styling","field","field-group","field-groups","form","form-provider","no-boilerplate","raf","react","react-advanced-form","react-form","reactive-props","rule","rx-props","validation","validation-messages","validation-rules"],"created_at":"2024-10-03T10:35:29.835Z","updated_at":"2025-04-05T18:06:47.448Z","avatar_url":"https://github.com/kettanaito.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Package version](https://img.shields.io/npm/v/react-advanced-form.svg)](https://www.npmjs.com/package/react-advanced-form) [![Build status](https://img.shields.io/circleci/project/github/kettanaito/react-advanced-form/master.svg)](https://circleci.com/gh/kettanaito/react-advanced-form) [![Vulnerabilities](https://snyk.io/test/github/kettanaito/react-advanced-form/badge.svg)](https://snyk.io/test/github/kettanaito/react-advanced-form) [![Dependencies status](https://img.shields.io/david/kettanaito/react-advanced-form.svg)](https://david-dm.org/kettanaito/react-advanced-form) [![DevDepenencies status](https://img.shields.io/david/dev/kettanaito/react-advanced-form.svg)](https://david-dm.org/kettanaito/react-advanced-form?type=dev) [![Greenkeeper badge](https://badges.greenkeeper.io/kettanaito/react-advanced-form.svg)](https://greenkeeper.io/)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./logo.png\" alt=\"React Advanced Form\" /\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eReact Advanced Form\u003c/h1\u003e\n\n[React Advanced Form](https://github.com/kettanaito/react-advanced-form) is a library for tailoring real-world forms in [React](https://reactjs.org/) with pleasure and ease.\n\n---\n\n# Features\n\n## Expectations shift\n\nTrust and expect a form to do more than just rendering the fields. Our features are designed to handle cumbersome use cases with clean and performant code\n\n## Immutable\n\nEach field interaction or update is a pure function that produces the next state of a field.\n\n## [Composite fields](https://redd.gitbook.io/react-advanced-form/getting-started/creating-fields)\n\nReact Advanced Form is _field-centric_. That means you define flexible fields composites and reuse them throughout the application. Reflect even the most granular field state changes in the UI to achieve the outmost user experience.\n\n```jsx\nimport React from 'react'\nimport { createField, fieldPresets } from 'react-advanced-form'\n\nconst Input = ({ fieldState, fieldProps }) =\u003e {\n  const { valid, invalid } = fieldState\n\n  const classNames = [valid \u0026\u0026 'has-success', invalid \u0026\u0026 'has-error'].filter(\n    Boolean,\n  )\n\n  return \u003cinput {...fieldProps} className={classNames.join(' ')} /\u003e\n}\n\nexport default createField(fieldPresets.input)(Input)\n```\n\n## Clean and fast\n\nDevelop production-ready forms in a speed of a prototype.\n\n```jsx\n// This is not a diminished example, this is a finite form\n\u003cForm action={this.registerUser}\u003e\n  \u003cInput name=\"username\" required /\u003e\n  \u003cInput name=\"password\" type=\"password\" required /\u003e\n\u003c/Form\u003e\n```\n\n## [Layered validation schema](https://redd.gitbook.io/react-advanced-form/validation/getting-started)\n\nSelect fields and declare validation rules using resolver functions. Utilize the order and priority of their execution to craft validation logic of any complexity.\n\n```js\nexport default {\n  type: {\n    password: {\n      capitalLetter: ({ value }) =\u003e /[A-Z]/.test(value),\n      oneNumber: ({ value }) =\u003e /[0-9]/.test(value),\n    },\n  },\n  name: {\n    confirmPassword: ({ get, value }) =\u003e {\n      /**\n       * The \"confirmPassword\" field will be re-validated whenever\n       * the \"value\" prop of \"userPassword\" field updates.\n       */\n      return value === get(['userPassword', 'value'])\n    },\n  },\n}\n```\n\nEach validation resolver can access respective field's `value`, `fieldProps`, and the `form` as the parameters. It can also reference other field's state via the `get` function, which creates a props subscription to re-evaluate the respective validation rule in real time.\n\n**Say goodbye to crowded** `validate` **functions, welcome clean validation schema**!\n\n## [**Reactive props**](https://redd.gitbook.io/react-advanced-form/architecture/reactive-props)\n\nHow much effort would it take you to make one field required based on another field\\(s\\)? Yes, the correct answer is—_one line of code_:\n\n```jsx\n\u003cInput\n  name=\"firstName\"\n  required={({ get }) =\u003e !!get(['lastName', 'value'])} /\u003e\n\u003cInput\n  name=\"lastName\"\n  required={({ get }) =\u003e !!get(['firstName', 'value'])} /\u003e\n```\n\nGet as many data from the sibling fields as needed, and build your logic around that. Rely on reactive programming that will re-evaluate a resolver function whenever the referenced field props update.\n\n## [Field grouping](https://redd.gitbook.io/react-advanced-form/components/field-group)\n\nControl the serialized data structure on the layout level by grouping the fields. Take advantage of nested and split groups.\n\n```jsx\n\u003cInput name=\"companyName\" value=\"Google\" /\u003e\n\n\u003cField.Group name=\"billingAddress\"\u003e\n  \u003cInput name=\"firstName\" value=\"John\" /\u003e\n  \u003cInput name=\"lastName\" value=\"Maverick\" /\u003e\n\u003c/Field.Group\u003e\n\n\u003cCheckbox name=\"termsAndConditions\" checked /\u003e\n\n\u003cField.Group name=\"deliveryAddress\"\u003e\n  \u003cInput name=\"firstName\" value=\"Catheline\" /\u003e\n  \u003cInput name=\"lastName\" value=\"McCoy\" /\u003e\n\u003c/Field.Group\u003e\n```\n\nThe form above serializes into the following JSON:\n\n```json\n{\n  \"companyName\": \"Google\",\n  \"billingAddress\": {\n    \"firstName\": \"John\",\n    \"lastName\": \"Maverick\"\n  },\n  \"termsAndConditions\": true,\n  \"deliveryAddress\": {\n    \"firstName\": \"Catheline\",\n    \"lastName\": \"McCoy\"\n  }\n}\n```\n\n## Third-party integration\n\nReact Advanced Form can be used with **any** third-party fields library by using powerful [`createField`](https://redd.gitbook.io/react-advanced-form/hoc/create-field) API. It also allows to create custom fields from literally any component.\n\n---\n\n# Getting started\n\n## Install\n\n```bash\nnpm install react-advanced-form --save\n```\n\n\u003e Make sure to have [React](https://github.com/facebook/react) \\(15.0+\\) installed in your project.\n\n## Guidelines\n\nStarting with something new may appear challenging. We have prepared step-by-step instructions on how to [Get started with React Advanced Form](https://redd.gitbook.io/react-advanced-form/getting-started/installation) to make the adoption process clear and fast.\n\n---\n\n# Materials\n\n- [**Documentation**](https://redd.gitbook.io/react-advanced-form)\n- [\"Advanced forms in React made easy\"](https://medium.com/@kettanaito/advanced-forms-in-react-made-easy-92a6e208f017) — Artem Zakharchenko \\(Medium\\)\n\n---\n\n# Browser support\n\n| Chrome | Firefox | Safari | iOS Safari | Edge | Internet Explorer |\n| ------ | ------- | ------ | ---------- | ---- | ----------------- |\n| 65+    | 57+     | 9+     | 8+         | 41+  | 11\\*              |\n\n\u003e \\* There is no official support for Internet Explorer. Consider educating the web and deprecating legacy browsers.\n\n---\n\n# Live examples\n\n- [Synchronous validation](https://codesandbox.io/s/53wlvmp42l?module=%2Fsrc%2FSyncValidation.js)\n- [Asynchronous validation](https://codesandbox.io/s/73236qlk06?module=%2Fsrc%2FAsyncValidation.js)\n\n---\n\n# Contributing\n\nAny of your contributions are highly appreciated. Please read through the [Contribution guidelines](https://redd.gitbook.io/react-advanced-form/developers/contributing) beforehand. Development isn't the only way to support, there are [many more](https://redd.gitbook.io/react-advanced-form/developers/contributing#other-contributions).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkettanaito%2Freact-advanced-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkettanaito%2Freact-advanced-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkettanaito%2Freact-advanced-form/lists"}