Skip to content

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

License

Notifications You must be signed in to change notification settings

wadackel/react-drip-form

Repository files navigation

react-drip-form

Build Status Codecov npm version

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

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

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

Releases

No releases published

Packages

No packages published