Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

react-advanced-form

1.5.0 • Public • Published

Package version Build status Vulnerabilities Dependencies status DevDepenencies status Discord

React Advanced Form

React Advanced Form

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

No boilerplate. No obscure high-order component configurations. No redundant state management. Embrace powerful custom styling, field grouping, advanced multi-layer validation, validation messages with smart fallback system, reactive props resolvers and much more.


Features

  • Changing expectations. 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 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 entire application. Reflect even the most granular field state changes in the UI to achieve the outmost user experience.
  • Prototyping speed. 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>
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. Apply the rules application-wide via FormProvider, or extend/override them for a specific form. 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. 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 layout above serializes into the following JSON:

{
  "companyName": "Google",
  "billingAddress": {
    "firstName": "John",
    "lastName": "Maverick"
  },
  "termsAndConditions": true,
  "deliveryAddress": {
    "firstName": "Catheline",
    "lastName": "McCoy"
  }
}
  • Third-party fields integration. React Advanced Form can be used with any third-party fields library by using powerful createField API.

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.


Resources


Browser support

Chrome Firefox Safari iOS Safari Edge Internet Explorer
65+ 57+ 9+ 8+ 41+

We do not conduct testing on Internet Explorer. Features may, or may not work in that browser. Consider educating the web and cutting down support of 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

407

version

1.5.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
Report a vulnerability