Introduction

Last updated 6 days ago

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

  • Boilerplate-free.

    • Forget about having kilometers of high-order-components around forms. Create clean and powerful forms without repeating yourself, without crazy abstractions.

  • Immutable. Each field change returns a new field with that change reflected.

  • 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.

  • Intuitive usage. Place a Form component, add some fields and the form is working without extra effort.

// 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>
export default {
type: {
password: {
capitalLetter: ({ value }) => /[A-Z]/.test(value),
oneNumber: ({ value }) => /[0-9]/.test(value)
}
},
name: {
confirmPassword: ({ value, get }) => {
/**
* 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, fields 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. Split and nest groups as you wish.

<Field.Group name="primaryInfo">
<Input name="username" value="john.maverick" />
<Input name="password" type="password" value="secret" />
</Field.Group>
<Checkbox name="termsAndConditions" checked />
<Field.Group name="primaryInfo">
<Input name="firstName" value="John" />
<Input name="lastName" value="Maverick" />
</Field.Group>

The layout above will be serialized into the following JSON:

{
"primaryInfo": {
"username": "john.maverick",
"password": "secret",
"firstName": "John",
"lastName": "Maverick"
},
"termsAndConditions": true
}
  • Third-party fields integration. Love a third-party field library? Connect it to React Advanced Form and enjoy the benefits of both! Use exposed createField high-order component to create a field out of any component.

Getting started

Peer dependencies

Make sure to have the following packages installed in your project:

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. No features are tested to ensure working there. They may, or may not work. Consider educating the web and deprecating support for obsolete browsers.

Live examples

Contributing

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

Found an issue? Eager to suggest a useful feature? Use the Issues tab for your feedback. Just make sure you're not duplicating the existing tickets. If you feel lucky, you can even submit a Pull request with the changes.

License

MIT License.