example.jsx

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';
 
const inputsConfig = {
    email: {
        defaultValue: 'test@example.com',
        validator: (value) => typeof value === 'string' && value.indexOf('@') >= 0
    }
};
 
const reducer = combineReducers({
    inputs: createInputsReducer(inputsConfig)
});
const store = createStore(reducer, applyMiddleware(thunk));
 
const Field = ({id, value, error, onChange, errorText}) => (
    <div>
        <input name={id} value={value} onChange={(e) => onChange(e.target.value)}/>
        {error ? <p style={{color: 'red'}}>{errorText}</p> : null}
    </div>
);
const ReduxInputsField = ReduxInputsWrapper(Input);
 
const Form = ({ inputs, reduxInputs }) => (
    <form>
        <ReduxInputsField errorText="Your email must contain an @" {...reduxInputs.inputProps.email}/>
        <h3>Input state</h3>
        <pre>{JSON.stringify(inputs, null, 2)}</pre>
    </form>
);
 
const FormContainer = connectWithInputs(inputsConfig)(s => s)(Form);
ReactDOM.render(<Provider store={store}><FormContainer /></Provider>, document.getElementById('container'));