react-redux-formal v0.5.0
react-redux-formal
Long name, I know. But the name is supposed to convey that it's build on top of both react and redux.
Formal came into life after I experimented with redux-form but found it a bit too "heavy" for most usecases I required. It came with slightly too much out of the box so I decided to make a more lightweight alternative.
Installation
As you'd expect, react-redux-formal
is available on npm.
$ npm install --save react-redux-formal
As the name would suggest, react-redux-formal
depends on redux
as well as
react-redux
, so you might need to issue
$ npm install --save redux react-redux
Setup
After you've installed the package, you'll need to add the formReducer
to your
store and expose the store to your app through react-redux
's Provider
.
Note: react-redux-formal
requires the formReducer to be mounted at
state.form
.
import { Provider } from 'react-redux';
import { formReducer } from 'react-redux-formal';
import { render } from 'react-dom';
import { combineReducers, createStore } from 'redux';
const store = createStore(combineReducers({
form: formReducer,
}));
render((
<Provider store={store}>
<App />
</Provider>
), document.getElementById('app-container')):
Usage
With the reducer in place you can use the connectForm
function to hook your
app up and have fields injected. For example, a simple login form component
might look something like this:
import PropTypes from 'prop-types';
import React from 'react';
import { connectForm, validators } from 'react-redux-formal';
export class Signup extends React.Component {
static propTypes = {
fields: PropTypes.object.isRequired,
formValidate: PropTypes.func.isRequired,
getValues: PropTypes.func.isRequired,
}
constructor() {
super();
this.onSubmit = this.onSubmit.bind(this);
}
onSubmit(ev) {
ev.preventDefault();
this.props.formValidate()
.then(values => {
/* do stuff with values */
})
.catch(() => {});
}
render() {
const { fields } = this.props;
return (
<form onSubmit={this.onSubmit}>
<fields.username />
<fields.email />
<fields.password />
<button type="submit">Sign up</button>
</form>
);
}
}
export default connectForm(() => {
name: 'signup',
fields: {
username: {
type: 'text',
label: 'Username',
validators: [
validators.required('Username is required'),
],
},
email: {
type: 'text',
label: 'E-mail',
validators: [
validators.required('E-mail is required'),
],
},
password: {
type: 'text',
label: 'Password',
validators: [
validators.required('Password is required'),
],
},
},
})(Signup);
API
connectForm(mapStateToOptions)(component)
Generate fields that are injected into the wrapped component. Does not modify the component passed to it. Instead it returns a new component which wraps the original component which should be used instead.
mapStateToOptions
(Function): A function which should return an object with options for your form. This gets passed the same arguments as reduxconnect
'smapStateToProps
. The returnoptions
object can have the following keys:name
(String): Name of the form, this is used to store the form in redux under its own namespace. Ensure this is unique for each form.fields
(Object): Object containing field specifications. The key will be reused when injecting fields into your component.values
(Object): Initial values to populate the fields with.inputTypes
(Object): Custom input types. This can be used to specify your own input types if you don't want to use the ones provided.
component
(Component): The component to wrap.
License
MIT © Chiel Kunkels
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago