Have ideas to improve npm?Join in the discussion! »

    react-advanced-form

    1.7.2 • Public • Published

    Package version Build status Vulnerabilities Dependencies status DevDepenencies status Greenkeeper badge

    React Advanced Form

    React Advanced Form

    React Advanced Form is a library for tailoring real-world forms in React 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

    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.

    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 <input {...fieldProps} className={classNames.join(' ')} />
    }
     
    export default createField(fieldPresets.input)(Input)

    Clean and fast

    Develop production-ready forms in a speed of a prototype.

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

    Layered validation schema

    Select fields and declare validation rules using resolver functions. Utilize the order and priority of their execution to craft validation logic of any complexity.

    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

    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 around that. Rely on reactive programming that will re-evaluate a resolver function whenever the referenced field props update.

    Field grouping

    Control the serialized data structure on the layout level by grouping the fields. Take advantage of nested and split 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

    React Advanced Form can be used with any third-party fields library by using powerful createField API. It also allows to create custom fields from literally any component.


    Getting started

    Install

    npm install react-advanced-form --save

    Make sure to have 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 to make the adoption process clear and fast.


    Materials


    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


    Contributing

    Any of your contributions are highly appreciated. Please read through the Contribution guidelines beforehand. Development isn't the only way to support, there are many more.

    Install

    npm i react-advanced-form

    DownloadsWeekly Downloads

    618

    Version

    1.7.2

    License

    MIT

    Unpacked Size

    1.83 MB

    Total Files

    8

    Last publish

    Collaborators

    • avatar
    • avatar