HoC based React forms state manager, Support for validation and normalization.
https://tsuyoshiwada.github.io/react-drip-form/
Table of Contents
Features
- HOC based API. (No magic, transparent and open API)
- Free component design. Integration with many UI frameworks.
- Rule based validation, and Provide many built-in rules.
- Support async and sync validation.
- Support normalization.
- Support Nest fields and Array fields.
- Customizable error message. (Support i18n)
Getting Started
Installation
$ npm install --save react-drip-formBasic usage
1. Create field component
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);2. Create form component
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);3. Mount the Form component
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> ); } }4. Enjoy coffee break ☕️
Your work has complete!
Let's enjoy coffee break slowly.
Documentation
See Document page.
Related projects
Components
Validator
ChangeLog
See CHANGELOG.md
TODO
We are planning to proceed with work, but the contribution is greatly appreciated!
Core
- File handling
- Testing section in Documentation
- Support for Flow
- Support for TypeScript
Components
- react-drip-form-toolbox
- react-drip-form-rebass
- react-drip-form-office-ui-fabric
- react-drip-form-antd
Contribute
- Fork it!
- Create your feature branch: git checkout -b my-new-feature
- Commit your changes: git commit -am 'Add some feature'
- Push to the branch: git push origin my-new-feature
- Submit a pull request :D
Bugs, feature requests and comments are more than welcome in the issues.
