https://github.com/kettanaito/react-advanced-form
Functional reactive forms. Multi-layer validation, custom styling, field grouping, reactive props, and much more.
https://github.com/kettanaito/react-advanced-form
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
Last synced: about 2 months ago
JSON representation
Functional reactive forms. Multi-layer validation, custom styling, field grouping, reactive props, and much more.
- Host: GitHub
- URL: https://github.com/kettanaito/react-advanced-form
- Owner: kettanaito
- License: mit
- Created: 2017-09-22T08:31:53.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-11-03T17:44:11.000Z (over 3 years ago)
- Last Synced: 2024-05-22T17:20:21.049Z (about 1 year ago)
- 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
- Language: JavaScript
- Homepage: https://redd.gitbook.io/react-advanced-form
- Size: 5.65 MB
- Stars: 217
- Watchers: 9
- Forks: 24
- Open Issues: 40
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/react-advanced-form) [](https://circleci.com/gh/kettanaito/react-advanced-form) [](https://snyk.io/test/github/kettanaito/react-advanced-form) [](https://david-dm.org/kettanaito/react-advanced-form) [](https://david-dm.org/kettanaito/react-advanced-form?type=dev) [](https://greenkeeper.io/)
React Advanced Form
[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.
---
# Features
## Expectations shift
Trust 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
## Immutable
Each field interaction or update is a pure function that produces the next state of a field.
## [Composite fields](https://redd.gitbook.io/react-advanced-form/getting-started/creating-fields)
React 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.
```jsx
import React from 'react'
import { createField, fieldPresets } from 'react-advanced-form'
const Input = ({ fieldState, fieldProps }) => {
const { valid, invalid } = fieldState
const classNames = [valid && 'has-success', invalid && 'has-error'].filter(
Boolean,
)
return
}
export default createField(fieldPresets.input)(Input)
```
## Clean and fast
Develop production-ready forms in a speed of a prototype.
```jsx
// This is not a diminished example, this is a finite form
```
## [Layered validation schema](https://redd.gitbook.io/react-advanced-form/validation/getting-started)
Select fields and declare validation rules using resolver functions. Utilize the order and priority of their execution to craft validation logic of any complexity.
```js
export default {
type: {
password: {
capitalLetter: ({ value }) => /[A-Z]/.test(value),
oneNumber: ({ value }) => /[0-9]/.test(value),
},
},
name: {
confirmPassword: ({ get, value }) => {
/**
* The "confirmPassword" field will be re-validated whenever
* the "value" prop of "userPassword" field updates.
*/
return value === get(['userPassword', 'value'])
},
},
}
```
Each 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.
**Say goodbye to crowded** `validate` **functions, welcome clean validation schema**!
## [**Reactive props**](https://redd.gitbook.io/react-advanced-form/architecture/reactive-props)
How 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_:
```jsx
!!get(['lastName', 'value'])} />
!!get(['firstName', 'value'])} />
```
Get 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.
## [Field grouping](https://redd.gitbook.io/react-advanced-form/components/field-group)
Control the serialized data structure on the layout level by grouping the fields. Take advantage of nested and split groups.
```jsx
```
The form above serializes into the following JSON:
```json
{
"companyName": "Google",
"billingAddress": {
"firstName": "John",
"lastName": "Maverick"
},
"termsAndConditions": true,
"deliveryAddress": {
"firstName": "Catheline",
"lastName": "McCoy"
}
}
```
## Third-party integration
React 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.
---
# Getting started
## Install
```bash
npm install react-advanced-form --save
```
> Make sure to have [React](https://github.com/facebook/react) \(15.0+\) installed in your project.
## Guidelines
Starting 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.
---
# Materials
- [**Documentation**](https://redd.gitbook.io/react-advanced-form)
- ["Advanced forms in React made easy"](https://medium.com/@kettanaito/advanced-forms-in-react-made-easy-92a6e208f017) — Artem Zakharchenko \(Medium\)
---
# Browser support
| Chrome | Firefox | Safari | iOS Safari | Edge | Internet Explorer |
| ------ | ------- | ------ | ---------- | ---- | ----------------- |
| 65+ | 57+ | 9+ | 8+ | 41+ | 11\* |
> \* There is no official support for Internet Explorer. Consider educating the web and deprecating legacy browsers.
---
# Live examples
- [Synchronous validation](https://codesandbox.io/s/53wlvmp42l?module=%2Fsrc%2FSyncValidation.js)
- [Asynchronous validation](https://codesandbox.io/s/73236qlk06?module=%2Fsrc%2FAsyncValidation.js)
---
# Contributing
Any 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).