react-drip-form

HoC based React forms state manager, Support for validation and normalization.

https://tsuyoshiwada.github.io/react-drip-form/

Table of Contents

• Features
• Getting Started
  • Installation
  • Basic usage
    • 1. Create field component
    • 2. Create form component
    • 3. Mount the Form component
    • 4. Enjoy coffee break ☕️
• Documentation
• Related projects
  • Components
  • Validator
• ChangeLog
• TODO
  • Core
  • Components
• Contribute
• License

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-form

Basic 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

• react-drip-form-components
• react-drip-form-material-ui
• react-drip-form-bootstrap

Validator

• drip-form-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

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Bugs, feature requests and comments are more than welcome in the issues.

License

MIT © tsuyoshiwada