redux-inputs
redux-inputs
works with redux to validate and store values from inputs and forms.
Features
- Declarative validation
- Declarative parsing
- Declarative formatting
- Async validation
- Per-input validation
- Cross-field validation
- Custom input components
- Programatic value collection
- Programatic value initialization
- Programatic value modification
- Programatic input reset
Docs
Installation
npm install --save redux-inputs
Single File Example
import React from 'react';import ReactDOM from 'react-dom';import createStore combineReducers applyMiddleware from 'redux';import createInputsReducer connectWithInputs ReduxInputsWrapper from 'redux-inputs';import Provider from 'react-redux';import thunk from 'redux-thunk'; // Define configuration for this form. A single input named 'email' with a default value and a function to determine validity.const inputsConfig = email: defaultValue: 'test@example.com' typeof value === 'string' && value >= 0 ; // Create redux store with a reducer created with the createInputsReducer function.const reducer = ;const store = ; // Define our own Field component, and wrap it in a ReduxInputsWrapper to easily create a compatible input component.// Integration with other ui component libraries, such as material-ui, would be done here.const Field = id value error onChange errorText <div> <input = = =/> error ? <p =>errorText</p> : null </div>;const ReduxInputsField = ; // Use the newly created ReduxInputsField by spreading in reduxInputs.inputProps.email object.const Form = inputs reduxInputs <form> <ReduxInputsField ="Your email must contain an @" /> <h3>Input state</h3> <pre>JSON</pre> </form>; // Hook the form up to the store with connectWithInputs, a wrapped version of react-redux's connect.const FormContainer = sForm;ReactDOM;
Contributing
Build
npm i
npm run build
Examples
npm run watch-examples & npm run serve-examples
Tests
npm test