HoC based React forms state manager, Support for validation and normalization.
MIT License
HoC based React forms state manager, Support for validation and normalization.
https://tsuyoshiwada.github.io/react-drip-form/
$ npm install --save react-drip-form
Input.js
import React from 'react';
import { dripFormField } from 'react-drip-form';
const Input = ({
input,
meta: { error, dirty, touched },
...props,
}) => (
<div>
<input
{...props}
{...input}
/>
{error && dirty && touched && <span style={{ color: 'red' }}>{error}</span>}
</div>
);
export default dripFormField()(Input);
Form.js
import React from 'react';
import { dripForm } from 'react-drip-form';
import Input from './Input';
const Form = ({
handlers,
meta: { invalid, pristine },
}) => (
<form onSubmit={handlers.onSubmit}>
<div>
<label htmlFor="email">Email-Address</label>
<Input
id="email"
type="email"
name="email"
label="Email-Address"
placeholder="Enter your Email-Address"
/>
</div>
<div>
<label htmlFor="password">Password</label>
<Input
id="password"
type="password"
name="password"
label="Password"
placeholder="Enter your Password"
/>
</div>
<button
type="submit"
disabled={invalid || pristine}
onClick={handlers.onSubmit}
>
Submit
</button>
</form>
);
export default dripForm({
validations: {
email: {
required: true,
email: true,
},
password: {
required: true,
},
},
})(Form);
App.js
import React, { Component } from 'react';
import Form from './Form';
export default class App extends Component {
// Get valid values.
handleSubmit = (values) => {
console.log(values);
};
render() {
return (
<div>
<h1>Login</h1>
<Form onValidSubmit={this.handleSubmit} />
</div>
);
}
}
Your work has complete! Let's enjoy coffee break slowly.
See Document page.
See CHANGELOG.md
We are planning to proceed with work, but the contribution is greatly appreciated!
Bugs, feature requests and comments are more than welcome in the issues.