Yet Another Redux Forms Library
MobX React Form
Manage form state in React/Redux applications with reactive updates and field level validation. Heavily inspired byWarning: experimental, not ready for production
Features
- Easy and JSON-serializable configuration.
- Reactive updates with input binding.
- Reactive validation with error messages.
- Supports both sync and async validation.
- Array fields.
- Nested fields.
- Easily integrated with component libraries (Material Ui, React Widgets, React Select, etc).
- Adheres to functional and immutable design principles.
- Written in Typescript.
Documentation
See the complete documentation here
Demo
There is a working live demo of this library's implementation here with accompanying source code.
Why?
Neither Redux Form nor React Redux Form (the two most popular React/Redux form libraries) provide an easy way of creating serializable form configurations. Furthermore, both libraries require the use of their own form and/or input components leading to unnecessary complexity. This library attempts to solve the first issue by dynamically creating a reducer function from serializable configurations and the second by exposing an API that does not require the need for special React components. The benefit is that more of the forms' functionality can be abstracted to the configuration rather than having to create individual form/field components.
Getting started
From the getting started section of the documentation.
-
Install dependencies (
redux
,react
,react-redux
,redux-thunk
are peer dependencies):yarn add redux react react-redux redux-thunk yarfl -
Define a config object with a
fields
property describing what fields should be part of the Redux state and how they should be validated. Therules
string describes which rules from validatorjs the field should be validated against (optional).//config.jsconst myFormConfig =name: 'myForm'fields:name:rules: 'required'email:rules: 'required|email'age:rules: 'required|min:18' -
Create a reducer, initial state and a connector by passing the
config
object to theinit
function and then simply create the Redux store as you normally would:// store.js;;;// create a reducer, initial state and a connectorconst reducer initialState connect = ;// redux-thunk is a peer dependency of yarflconst enhancers =const store = ; -
Set up the
Provider
as you normally would with React Redux. To connect a React component with the store from the previous step use theconnect
method that we created withinit
in step three. Thisconnect
method doesn't requiremapStateToProps
ormapDispatchToProps
arguments, this is taken care of by Yarfl automatically. Just pass the React component as its first and only argument.// App.jsimport React from 'react';import Provider from 'react-redux';import store from './store.js'import MyFormComponent from './MyFormComponent.js';Component{return<Provider =><MyFormComponent /></Provider>}// MyFormComponent.jsimport React from 'react';import connect from './store.js';Component...MyComponent -
When connected, a form prop of the name specified in the config object (in our case
myForm
) is passed to the React component. ThemyForm
prop is an object containing a handful of properties and methods to interact with the store.Component{const select valid errors = thispropsmyForm;/*** The 'select' function accepts a key string and* returns an object containing the name field* object from the store with a 'bind' function.*/const nameField = ;return<form><div>/*The 'bind' function returns an object of propertiesthat can be spread on an input element effectivelybinding that component to update and track the state.*/<label>nameFieldlabel</label><br/><input /></div>/*The 'valid' property describes if all fieldsregistered in the Redux store pass theirvalidation rules.*/<button ="submit" = /><div>/*The 'errors' array contains the first errormessage (if any) for all registered fields.*/<label>All errors:</label><ul>errors</ul></div></form>}The
bind
method returns an object containing input attributes (with"value"
) from the store andonChange
,onBlur
andonFocus
handlers to dispatch update actions.const bindProps = ;/*bindProps = {value: '',default: '',id: 'name',name: 'name',type: 'text',label: 'Name',className: '',placeholder: 'Name',disabled: false,autoFocus: false,onChange: (e: InputEvent, value?: any) => void,onBlur: () => void,onFocus: () => void,}*/Using the spread syntax will attach all the props to the input element, but you are free to choose which properties you want to use or create new ones from
bind
's return values:{const select = thisprops;const id value onChange = ;return...<input=="custom-email-name"==/>...} -
To initiate more than one form just add more config objects as input parameters from the
init
function from step three.// pass one or more config objects to initconst reducer initialState connect = ;