react-formstate

An optimal productivity API for React forms

react-formstate streamlines form components using plain old setState and one-way binding. It's like building a form in raw React... minus the busy work.

$ npm install react-formstate --save

It's a best-in-class solution with a focus on validation. Short of command pattern, it will support your use case.

Demo

Validated react-bootstrap components: react-formstate-demo

Walkthrough

• Introduction to react-formstate
• Initializing and reading form state
• Updating form state

Features and examples

• Basic example
• Show messages onChange, onBlur, or onSubmit
• Validation
• React-Bootstrap example
• Checkbox, CheckboxGroup, RadioGroup, Select
• Nonstandard input example: react-datepicker

Advanced features and examples

• Asynchronous validation
• Nested form components
• Form extension
• Arrays
• The onUpdate callback

Motivation

If you are adding validation to a React form and you find yourself thinking - there must be a better way - that was the impetus behind react-formstate. Since React is all about responding to changes in component state, the key to a React-based solution is to provide an API to easily manage form state, specifically validation status. In doing so, you get productivity gains beyond validation. The end result is you keep your form components DRY.

Arguments for react-formstate

• Advantages of react-formstate
• Design contrast

Documentation

• v0.5.0 release notes
• API
• React forms

Peer dependencies

• React
• es5 polyfills (for example: Object.keys and Array.isArray)
• That's it!

Enhancements

If you have an idea for improving react-formstate, or a feature request, I am happy to hear it.

Or, feel free to fork the repository and send a pull request.

Contributions

If you see value in react-formstate and react-formstate-validation please star the NPM packages and the GitHub repositories.

Also, you can help others find the packages by recommending them and linking to them. Thanks!