Library for easily creating forms with React and Redux. Inspired by react-redux-form.
importcombineReducerscreateStorefrom 'redux';import Provider from 'react-redux';import React from 'react';importControlFieldErrorFormcreateFormReducerfrom 'underdog-react-redux-form';// Create a reducer for your formconst validate = value valuelength > 0;const exampleForm =;const reducer =;const store = ;// Create a formconst Application =<Provider =><Form ="forms.exampleForm">formState updateForm<div><label><span ="block-label">First name</span><Control.Text ="first" /><FieldError ="first"><strong>This field is invalid!</strong></FieldError></label><label><span ="block-label">Last name</span><Control.Text ="last" /><FieldError ="last"><strong>This field is invalid!</strong></FieldError></label></div>;</Form></Provider>;
Check out example/app.js for a more thorough example.
npm install underdog-react-redux-form underdog-pup react redux react-redux
Creating a form
Creating a form reducer
Before you can create a form, you're going to have to create a reducer that manages the state of your form.
You can create a form reducer with the
createFormReducer function. This function accepts two arguments: a unique identifier for your form and a configuration object for the initial values for your form.
The initial state for the form reducer will look something like this:
"name": "formName"// Indicates if the form has been submitted at least once."didSubmit": false// Indicates if the form's current values are different from its configured value."isClean": true// Indicates if all of the form's fields are considered "valid"."isValid": false// Indicates if errors should be shown to the user."showErrors": false// Indicates if a user has interacted with a form field."touched": false// The current state of the form's fields."fields":"fieldName":// The initial value for this field."initialValue": ""// Boolean that indicates if the current value of this field is different from its initial value."isClean": true// Indicates if this field is valid."isValid": false// Indicates if the user has interacted with this field."touched": false// The current value of this form field."value": ""
Updating a form's state
If you are using the
<Form /> component with any of the included controls, the form will automatically be updated as the value for the control is updated:
importControlFormfrom 'underdog-react-redux';<Form ="path.to.form.reducer.in.store.state">formState updateForm<div><Control.Text ="fieldName" /><Control.Select ="otherFieldName"><option ="">Select an option</option><option ="option_1">Option 1</option><option ="option_2">Option 2</option></Control.Select></div></Form>
If you are using a custom control, you can update a form with the
updateForm function that is provided to the
<Form />'s children:
<Form ="path.to.form.reducer.in.store.state">formState updateForm<div><input="text"==></div></Form>
You can also update a form's state manually with the
updateForm action creator:
;// Where-ever dispatch is available;