redux-form-manager
Advanced tools
A Form control built with and for React with Redux. Initially built for use in Redux Project
Validatation in form is easy to go...
v3.0.0v3.0.0
v2.16.0
equalLength, maxLength, minLength cannot validate and show message properly.v2.15.0
lodash to peerDependencies for features updateNestedFieldDatav2.14.0
afterUpdateWhenValid (default = false) (thanks for KIRAN H)v2.13.0
v2.12.0
v2.10.0
v2.9.0
props in formData formData: (state, props) => {}React Component boilerplate for creating new React Compoment and everything you need to get started.
I recommend you to use it if you wanna create some awesome component for this world !
This project uses library React-Redux-Gamo-boilerplate, React, Redux, React-Redux and ES2015 syntax, so make sure that you are capable with it.
Live demo: https://hlex.github.io/redux-form-manager/demo
The live demo is still running redux-form-manager v3.0.0
you can run this repository in your local machine by this command
$ npm run dev
it will serve at localhost:9000
$ npm install redux-form-manager --save
or if you prefer yarn..
$ yarn add redux-form-manager
Read more about loganfsmyth/babel-plugin-transform-decorators-legacy
export default bindFormValidation(core, afterFieldChange, mapStateToValidationPriority)(YourContainer)
const connectedComponent = connect(mapStateToProps, mapDispatchToProps)(YourContainer)
export default bindFormValidation(core, afterFieldChange, mapStateToValidationPriority)(
connectedComponent
)
There are many features we have provided
Create new js file and then copy following codes
import React, { Component } from 'react'
import { bindFormValidation } from 'redux-form-manager'
class TextInputField extends Component {
handleChange = (e) => {
const { onChange } = this.props
onChange(e.target.value)
}
render = () => {
const {
label,
value,
disable,
placeholder,
hidden,
errorMessage,
} = this.props
return (
<div className={`box-form-input ${hidden && 'hidden'}`}>
<label>{label}</label>
<input
type='text',
value={value}
disabled={disabled}
placeholder={placeholder}
onChange={this.handleChange}
/>
<div className='error-message'>{errorMessage}</div>
</div>
)
}
}
const createForm = (state) => {
return {
firstname: {
name: 'firstname',
type: 'input',
label: 'Firstname',
value: '',
placeholder: 'write down your firstname',
disabled: false,
hidden: false,
rules: {
required: 'Please fill in your firstname.'
},
},
lastname: {
name: 'lastname',
type: 'input',
label: 'Lastname',
value: '',
placeholder: 'write down your lastname',
disabled: false,
hidden: false,
rules: {
required: 'Please fill in your lastname.'
},
}
}
}
const core = {
actionType: 'FORM/CHANGE/CUSTOMER',
formData: (state, props) => createForm(state),
renderUIInputField: (fieldData, updateValue) => {
return <TextInputField {...fieldData} onChange={updateValue} />
}
}
@bindFormValidation(core)
export default class Form extends Component {
render() {
const { formData, renderInputField, firstError } = this.props
return (
<div>
<h1>Form</h1>
{renderInputField(formData.firstname)}
{renderInputField(formData.lastname)}
<h4>error: {firstError}</h4>
</div>
)
}
}
Boom! you got a form with field that could be validated, your page also. Look at your console that
Coming soon.
install npm packages
$ npm install redux-form-manager --save
or if you prefer yarn..
$ yarn add redux-form-manager --save
import library at the start of your js file
import { bindFormValidation } from 'redux-form-manager'
InputField is a UI component that receive event from user. You can create any JSX UI as you want. You just reminded that binding function props with renderUIInputField updateValue.
import React, { Component } from 'react'
class TextInputField extends Component {
handleChange = (e) => {
const { onUpdateValue } = this.props
onUpdateValue(e.target.value)
}
render = () => {
const {
label,
value,
disable,
placeholder,
hidden,
errorMessage,
} = this.props
return (
<div className={`box-form-input ${hidden && 'hidden'}`}>
<label>{label}</label>
<input
type='text',
value={value}
disabled={disabled}
placeholder={placeholder}
onChange={this.handleChange}
/>
<div className='error-message'>{errorMessage}</div>
</div>
)
}
}
You can create InputField Component that can morph to other inputs by defining props 'type' such as text, select, checkbox, radio etc.
import React, { Component } from 'react'
import TextInput from 'your/component/path'
import SelectInput from 'your/component/path'
class InputField extends Component {
render() {
switch (type) {
case 'text':
return <TextInput {...this.props}></TextInput>
case 'select':
return <SelectInput {...this.props}></SelectInput>
default:
return <TextInput {...this.props}></TextInput>
}
}
}
export default InputField
bindFormValidation is a higher order function that return function which grant component to have form manager modules which are 'formData', 'renderInputField()', 'firstError'
core is an object to assign variables to bindFormValidation()
const core = {
actionType: 'FORM/CHANGE/CUSTOMER',
formData: (state, props) => createForm(state),
renderUIInputField: (fieldData, updateValue) => {
return <InputField {...fieldData} onChange={updateValue} />
}
}
@bindFormValidation(core)
As you know, redux's store has dispatch function which it is a process that fire action to reducer contains actionType and any variables. defaultActionType is a default actionType of store.dispatch when you didn't send fieldData's actionType (we'll talk about this later).
Create new js file and then copy following codes
import React, { Component } from 'react'
import InputField, { bindFormValidation } from 'redux-form-manager'
const createForm = (state) => {
return {
firstname: {
name: 'firstname',
type: 'input',
label: 'Firstname',
value: '',
placeholder: 'write down your firstname',
disabled: false,
hidden: false,
rules: [
required: 'Please fill in your firstname.'
],
},
lastname: {
name: 'lastname',
type: 'input',
label: 'Lastname',
value: '',
placeholder: 'write down your lastname',
disabled: false,
hidden: false,
rules: [
required: 'Please fill in your lastname.'
],
}
}
}
const core = {
actionType: 'FORM/CHANGE/CUSTOMER',
formData: (state, props) => createForm(state),
renderUIInputField: (fieldData, updateValue) => {
switch (fieldData.type)
return <InputField {...fieldData} onChange={updateValue} />
}
}
@bindFormValidation(core)
export default class Form extends Component {
render() {
const { formData, renderInputField, firstError } = this.props
return (
<div>
<h1>Form</h1>
{
renderInputField(formData.firstname)
}
{
renderInputField(formData.lastname)
}
<h4>error: {firstError}</h4>
</div>
)
}
}
formData is a metadata of the form which it's type is Object. you can describe properties of your form in this variable. In any formData, it contains many fieldDatas.
const formData = {
firstname: {
name: 'firstname',
type: 'input',
label: 'Firstname',
value: '',
placeholder: 'write down your firstname',
disabled: false,
hidden: false,
rules: [
required: 'Please fill in your firstname.'
],
},
}
fieldData is an Object that define properties of the field. For example, firstname field would have properties like this
| Property | Type |
|---|---|
| name | String (*) |
| value | String, Object (*) |
| rules | Object (*) |
| type | String |
| label | String |
| placeholder | String |
| disabled | Boolean |
| hidden | Boolean |
(*) is required
we can define fieldData as follow.
const firstname = {
name: 'firstname',
type: 'input',
label: 'Firstname',
value: '',
placeholder: 'write down your firstname',
disabled: false,
hidden: false,
rules: {
required: 'Please fill in your firstname.'
},
},
In ordinary form, we know that there are many input types such as 'text', 'select', 'radio', 'checkbox' etc. In redux-form-manager we also provide you to config your input type.
import React, { Component } from 'react'
import { bindFormValidation } from 'redux-form-manager'
import TextInput from 'your/component/path'
import SelectInput from 'your/component/path'
const createForm = (state) => {
return {
firstname: {
name: 'firstname',
type: 'text',
label: 'Firstname',
value: '',
placeholder: 'write down your firstname',
disabled: false,
hidden: false,
rules: {
required: 'Please fill in your firstname.'
},
},
age: {
name: 'age',
type: 'select',
label: 'Age',
value: '',
placeholder: '',
disabled: false,
hidden: false,
options: [
{
label: '15 years old',
value: '15',
},
{
label: '20 years old',
value: '20',
}
]
rules: {
required: 'Please select your age.'
},
}
}
}
const core = {
actionType: 'FORM/CHANGE/CUSTOMER',
formData: (state, props) => createForm(state),
renderUIInputField: (fieldData, updateValue) => {
switch (fieldData.type) {
case 'text':
return <TextInput {...fieldData} onChange={updateValue} />
case 'select':
return <SelectInput {...fieldData} onChange={updateValue} />
default:
return <InputField {...fieldData} onChange={updateValue} />
}
}
}
@bindFormValidation(core)
export default class Form extends Component {
render() {
const { formData, renderInputField, firstError } = this.props
return (
<div>
<h1>Form</h1>
{ renderInputField(formData.firstname) }
{ renderInputField(formData.age) }
<h4>error: {firstError}</h4>
</div>
)
}
}
Building your own custom UI, we are going to use 2nd parameter of renderInputField.
import React, { Component } from 'react'
import { bindFormValidation } from 'redux-form-manager'
const createForm = (state) => {
return {
firstname: {
name: 'firstname',
type: 'input',
label: 'Firstname',
value: '',
placeholder: 'write down your firstname',
disabled: false,
hidden: false,
rules: {
required: 'Please fill in your firstname.'
},
},
lastname: {
name: 'lastname',
type: 'input',
label: 'Lastname',
value: '',
placeholder: 'write down your lastname',
disabled: false,
hidden: false,
rules: {
required: 'Please fill in your lastname.'
},
}
}
}
const core = {
actionType: 'FORM/CHANGE/CUSTOMER',
formData: (state, props) => createForm(state),
renderUIInputField: (fieldData, updateValue) => {
return <InputField {...fieldData} onChange={updateValue} />
}
}
@bindFormValidation(core)
export default class Form extends Component {
renderMyInputComponent = (fieldData, updateValue) => {
return (
<MyInputComponent
{...fieldData}
onUpdateValue={(value) => updateValue(fieldData.key, value)}
/>
)
}
render() {
const { formData, renderInputField, firstError } = this.props
return (
<div>
<h1>Form</h1>
{ renderInputField(formData.firstname, this.renderMyInputComponent) }
{ renderInputField(formData.lastname) }
<h4>error: {firstError}</h4>
</div>
)
}
}
class MyInputComponent extends Component {
handleChange = (e) => {
const { onUpdateValue } = this.props
onUpdateValue(e.target.value)
}
render() {
return (
const {
label,
value,
disable,
placeholder,
hidden,
errorMessage,
} = this.props
<div className={`box-form-input ${hidden && 'hidden'}`}>
<label>{label}</label>
<input
type='text',
value={value}
disabled={disabled}
placeholder={placeholder}
onChange={this.handleChange}
/>
<div className='error-message'>{errorMessage}</div>
</div>
)
}
}
Validating each field by priority.
import React, { Component } from 'react'
import InputField, { bindFormValidation } from 'redux-form-manager'
const createForm = (state) => {
return {
firstname: {
name: 'firstname',
type: 'input',
label: 'Firstname',
value: '',
placeholder: 'write down your firstname',
disabled: false,
hidden: false,
rules: {
required: 'Please fill in your firstname.'
},
},
lastname: {
name: 'lastname',
type: 'input',
label: 'Lastname',
value: '',
placeholder: 'write down your lastname',
disabled: false,
hidden: false,
rules: {
required: 'Please fill in your lastname.'
},
}
}
}
const mapStateToValidationPriority = state => {
return ['lastname', 'firstname']
}
const core = {
actionType: 'FORM/CHANGE/CUSTOMER',
formData: (state, props) => createForm(state),
renderUIInputField: (fieldData, updateValue) => {
return <InputField {...fieldData} onChange={updateValue} />
}
}
@bindFormValidation(core, null, mapStateToValidationPriority)
Doing after update function when any field dispatch.
import React, { Component } from 'react'
import InputField, { bindFormValidation } from 'redux-form-manager'
const createForm = (state) => {
return {
firstname: {
name: 'firstname',
type: 'input',
label: 'Firstname',
value: '',
placeholder: 'write down your firstname',
disabled: false,
hidden: false,
rules: {
required: 'Please fill in your firstname.'
},
},
lastname: {
name: 'lastname',
type: 'input',
label: 'Lastname',
value: '',
placeholder: 'write down your lastname',
disabled: false,
hidden: false,
rules: {
required: 'Please fill in your lastname.'
},
}
}
}
const mapStateToValidationPriority = state => {
return []
}
const afterFieldChange = (dispatch, state) => {
return {
firstname: (value, key) => {
dispatch({
type: 'FORM/CHANGE/CUSTOMER',
key: 'lastname',
value: value
})
},
}
}
const core = {
actionType: 'FORM/CHANGE/CUSTOMER',
formData: (state, props) => createForm(state),
renderUIInputField: (fieldData, updateValue) => {
return <InputField {...fieldData} onChange={updateValue} />
}
}
@bindFormValidation(core, afterFieldChange, mapStateToValidationPriority)
Customizing action type of each field.
import React, { Component } from 'react'
import InputField, { bindFormValidation } from 'redux-form-manager'
const createForm = (state) => {
return {
firstname: {
actionType: 'MY_ACTION_FIRSTNAME',
name: 'firstname',
type: 'input',
label: 'Firstname',
value: '',
placeholder: 'write down your firstname',
disabled: false,
hidden: false,
rules: {
required: 'Please fill in your firstname.'
},
},
lastname: {
actionType: 'MY_ACTION_LASTNAME',
name: 'lastname',
type: 'input',
label: 'Lastname',
value: '',
placeholder: 'write down your lastname',
disabled: false,
hidden: false,
rules: {
required: 'Please fill in your lastname.'
},
}
}
}
const afterFieldChange = (dispatch, state) => {
return {
firstname: (value, key) => {
dispatch({
type: 'FORM/CHANGE/CUSTOMER',
key: 'lastname',
value: value
})
},
}
}
const core = {
actionType: 'FORM/CHANGE/CUSTOMER',
formData: (state, props) => createForm(state),
renderUIInputField: (fieldData, updateValue) => {
return <InputField {...fieldData} onChange={updateValue} />
}
}
@bindFormValidation(core, afterFieldChange)
rules: {
'required': `${message}`,
'require': `${message}`,
'email': `${message}`,
'thaiMobile': `${message}`,
'thaiPhone': `${message}`,
'thaiId': `${message}`,
'thaiFullname': `${message}`,
'equalLength': {
length: `${length}`,
message: `${message}`
},
'maxLength': {
maxLength: `${length}`,
message: `${message}`
},
'minLength': {
minLength: `${length}`,
message: `${message}`
},
'alphabet': `${message}`,
'number': `${message}`,
'correctBracket': `${message}`,
'notStartWithSpacing': `${message}`,
'notContainDoubleSpacing': `${message}`,
'notEndWithSpacing': `${message}`,
'notContainSpecialChar': `${message}`,
}
Creating custom validation rules.
import React, { Component } from 'react'
import InputField, { bindFormValidation } from 'redux-form-manager'
const createForm = (state) => {
return {
firstname: {
name: 'firstname',
type: 'input',
label: 'Firstname',
value: '',
placeholder: 'write down your firstname',
disabled: false,
hidden: false,
rules: {
required: 'Please fill in your firstname.'
customValidate: [
{
message: 'ชื่อต้องขึ้นต้นด้วยตัวเลข',
valid: value => {
return /^\d/.test(value)
}
}
]
},
},
lastname: {
name: 'lastname',
type: 'input',
label: 'Lastname',
value: '',
placeholder: 'write down your lastname',
disabled: false,
hidden: false,
rules: {
required: 'Please fill in your lastname.'
},
}
}
}
const core = {
actionType: 'FORM/CHANGE/CUSTOMER',
formData: (state, props) => createForm(state),
renderUIInputField: (fieldData, updateValue) => {
return <InputField {...fieldData} onChange={updateValue} />
}
}
@bindFormValidation(core)
Using Nested field data such as array of object.
Handling dynamic field properties.
Dispatch firstError to outside container.
Using other event to dispatch.
Thank you for your support !
FAQs
Redux form manager
We found that redux-form-manager demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
A mini Shai-Hulud campaign compromised Red Hat Cloud Services npm packages to steal developer and CI/CD secrets during installation.
Research
/Security News
The North Korean malware loader hides in a Packagist-listed package and its GitHub branch to fetch and execute remote code in a likely Contagious Interview-style lure.
Security News
The Rust project is moving toward formal rules on LLM use in contributions after months of internal debate over maintainer burden, code quality, and contributor experience.