https://github.com/zillow/redux-inputs
redux-inputs is a Javascript library that works with redux to validate and store values from inputs and forms.
https://github.com/zillow/redux-inputs
Last synced: about 1 year ago
JSON representation
redux-inputs is a Javascript library that works with redux to validate and store values from inputs and forms.
- Host: GitHub
- URL: https://github.com/zillow/redux-inputs
- Owner: zillow
- License: mit
- Created: 2016-07-30T02:57:57.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T01:32:01.000Z (over 3 years ago)
- Last Synced: 2025-04-13T18:09:31.789Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://zillow.github.io/redux-inputs/examples/
- Size: 2.75 MB
- Stars: 102
- Watchers: 14
- Forks: 10
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# redux-inputs
[](https://badge.fury.io/js/redux-inputs)
[](https://travis-ci.org/zillow/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
- [Getting Started](docs/gettingStarted.md)
- [API](docs/api.md)
- [Examples](https://zillow.github.io/redux-inputs/examples/)
## Installation
`npm install --save redux-inputs`
## Single File 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';
// 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',
validator: (value) => typeof value === 'string' && value.indexOf('@') >= 0
}
};
// Create redux store with a reducer created with the createInputsReducer function.
const reducer = combineReducers({
inputs: createInputsReducer(inputsConfig)
});
const store = createStore(reducer, applyMiddleware(thunk));
// 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}) => (
onChange(e.target.value)}/>
{error ? {errorText}
: null}
);
const ReduxInputsField = ReduxInputsWrapper(Field);
// Use the newly created ReduxInputsField by spreading in reduxInputs.inputProps.email object.
const Form = ({ inputs, reduxInputs }) => (
Input state
{JSON.stringify(inputs, null, 2)}
);
// Hook the form up to the store with connectWithInputs, a wrapped version of react-redux's connect.
const FormContainer = connectWithInputs(inputsConfig)(s => s)(Form);
ReactDOM.render(, document.getElementById('container'));
```
## Contributing
### Build
npm i
npm run build
### Examples
npm run watch-examples & npm run serve-examples
### Tests
npm test