React Advanced Form
  • Introduction
  • General
    • Comparison
      • Compared to Formik
      • Compared to Final form
    • Migration guides
      • 1.4.x → 1.5.x
    • FAQ
  • Getting started
    • Installation
    • Creating fields
    • Creating form
    • Validation rules
    • Validation messages
    • Applying validation
    • Handle submit
  • Architecture
    • Argument properties
    • Referencing
    • Field lifecycle
    • Controlled fields
    • Reactive props
  • Validation
    • Getting started
    • Validation schema
      • Rule definition
      • Reactive rule
    • Validation messages
  • High-order components
    • createField
      • Options
      • Field presets
      • Exposed props
  • Components
    • FormProvider
    • Form
      • Props
        • innerRef
        • initialValues
        • action
        • rules
        • messages
      • Methods
        • setValues()
        • setErrors()
        • reset()
        • validate()
        • serialize()
        • submit()
      • Callbacks
        • onFirstChange
        • onReset
        • onInvalid
        • onSerialize
        • onSubmitStart
        • onSubmitted
        • onSubmitFailed
        • onSubmitEnd
    • Field.Group
    • Field
      • Props
        • rule
        • asyncRule
        • skip
      • Callbacks
        • onFocus
        • onChange
        • onBlur
  • Recipes
    • Generating a form
    • Utilizing functions
  • Developers
    • Contributing
Powered by GitBook
On this page
  • Features
  • Expectations shift
  • Immutable
  • Composite fields
  • Fast and clean
  • Layered validation
  • Reactive props
  • Field grouping
  • Third-party integration
  • Getting started
  • Install
  • Guidelines
  • Resources
  • Browser support
  • Live examples
  • Contributing

Introduction

NextComparison

Last updated 6 years ago

is a library for tailoring real-world forms in with pleasure and ease.

Features

Expectations shift

Our primary goal is to educate developers to 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 function that produces the next state of a field.

Composite fields

React Advanced Form is field-centric. That means that you define field components and reuse them throughout the entire application. Utilize reach field API to reflect even the most granular field state changes in the user interface.

Fast and clean

Form declaration must be simple, easy to read and maintain.

// No, this is not a diminished example, this is a completely working form
<Form action={this.registerUser}>
  <Input name="username" required />
  <Input name="password" type="password" required />
</Form>

Layered validation

Select the field(s) based on type or name, and declare validation resolver functions.

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"])
    },
  },
};

Access the field's value, fieldProps and the form as the parameters of each resolver function. Say goodbye to crowded validate functions, welcome clean validation schemas!

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:

<Input
  name="firstName"
  required={({ get }) => !!get(['lastName', 'value'])} />
<Input
  name="lastName"
  required={({ get }) => !!get(['firstName', 'value'])} />

Get as many data from the sibling fields as needed, and build your logic on that. Embrace the power of reactive programming, which re-evaluates a resolver function whenever the referenced field props update.

Field grouping

Designed to tackle API misalignment, field grouping allows to control the serialized data structure of a form on the layout level. Take advantage of nested, split or exact groups.

<Input name="companyName" value="Google" />

<Field.Group name="billingAddress">
  <Input name="firstName" value="John" />
  <Input name="lastName" value="Maverick" />
</Field.Group>

<Checkbox name="termsAndConditions" checked />

<Field.Group name="deliveryAddress">
  <Input name="firstName" value="Catheline" />
  <Input name="lastName" value="McCoy" />
</Field.Group>

The form above serializes into the following JSON:

{
  "companyName": "Google",
  "billingAddress": {
    "firstName": "John",
    "lastName": "Maverick"
  },
  "termsAndConditions": true,
  "deliveryAddress": {
    "firstName": "Catheline",
    "lastName": "McCoy"
  }
}

Third-party integration

Turn any component (including a third-party one) into a field, which validates, serializes, and behaves just as any other field. Alternatively, you can build a field with the entirely custom logic.

Getting started

Install

npm install react-advanced-form --save

Guidelines

Starting with something new may appear challenging. There is a step-by-step instructions on how to get started with React Advanced Form, which ensure easy and clear integration process.

Resources

Browser support

Chrome

Firefox

Safari

iOS Safari

Edge

Internet Explorer

65+

57+

9+

8+

41+

–

There is no official support for Internet Explorer. There is no testing conducted for that browser. Consider educating the web and deprecating support for obsolete browsers.

Live examples

Contributing

Make sure to have (15.0+) installed in your project.

"" — Artem Zakharchenko (Medium)

Any of your contributions are highly appreciated! See the to get to know the process better. Moreover, development isn't the only way to contribute, there are .

Creating fields
Creating form
Getting started
Reactive props
Field.Group
createField
React
Installation
Documentation
Advanced forms in React made easy
Synchronous validation
Asynchronous validation
Contribution guidelines
many more
React Advanced Form
React
Package version
Build status
Vulnerabilities
Dependencies status
DevDepenencies status