wadackel / react-drip-form Goto Github PK

View Code? Open in Web Editor NEW

65.0 3.0 5.0 7.36 MB

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

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

License: MIT License

JavaScript 91.78% CSS 8.22%

react form validation normalization state drip-form hoc higher-order-component

react-drip-form's Introduction

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

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

Features
Getting Started
- Installation
- Basic usage
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

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

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.

License

MIT © tsuyoshiwada

react-drip-form's People

Contributors

Stargazers

Watchers

Forkers

nobusiva toshiaki61

react-drip-form's Issues

typescript definition

Hello,

Do you think add a definition file for typescript?

When i reload a page that uses a drip form with a custom validation rule i get the error that the rule is already register and the component fails to load. Not sure how i should set everything up to prevent this...

My setup is as follows (redacted a bit for brevity):

import React from 'react';
import PropTypes from 'prop-types';
import { dripForm, Validator } from 'react-drip-form';

Validator.registerRule(
  'password_matches',
  (value, params, field, values) => value === values.password,
);

const EmailPasswordForm = dripForm({
  validations: {
    email: {
      required: true,
      email: true,
    },
    password: {
      required: true,
      min: 6,
    },
    password_confirm: {
      required: true,
      min: 6,
      password_matches: true,
    },
  },
  messages: {
    email: {
      required: 'Please enter your email address',
      email: 'This is not a valid email address',
    },
    password: {
      required: 'Please enter your password',
      min: 'Your password needs to be at least 6 characters',
    },
    password_confirm: {
      required: 'Please enter your password again',
      min: 'Your password needs to be at least 6 characters',
      password_matches: 'Enter the same password twice',
    },
  },
})(({ handlers, error, meta: { pristine, invalid, validating } }) => (
  <form onSubmit={handlers.onSubmit}>
    <FieldContainer>
      <Label htmlFor="email">
        Email *
      </Label>
      <Input type="text" id="email" name="email" />
    </FieldContainer>
    <FieldContainer>
      <Label htmlFor="password">
       Password *
      </Label>
      <Input type="password" id="password" name="password" />
    </FieldContainer>
    <FieldContainer>
      <Label htmlFor="password_confirm">
        Confirm Password *
      </Label>
      <Input type="password" id="password_confirm" name="password_confirm" />
    </FieldContainer>

    <Button
      color="blue"
      primary
      onClick={handlers.onSubmit}
      disabled={pristine || invalid || validating}
    >
       Register
    </Button>
    <Error error={error} />
  </form>
));

Fist time it loads it's fine. But when i use browser refresh on this form the console, sometimes not always strangely, says the asyncComponent failed to load due to password_confirm being defined already.

現在の状態を保持したい。

タブによる複数ページ切り替えのアプリケーションでそれぞれForm を利用した場合、ページ切り替えの際に上体を保持したいと考えています。現在そのようなオプションはございますでしょうか？

Wildcard syntax with messages

Is it possible to use wildcard syntax for top level messages like so?:

messages:{
     'users.*.email':{
          email: "Invalid Email"
      }
}

My validations are working but my errors are populating with the following default message:

The users.0.email must be a valid email address. ...which appears to use the name supplied to each dripFormField instance.

Since my names will be dynamic as I am using field validation for a collection I would prefer to use the top level messages config if possible.

Appreciate the help!

required if

Hello,

I try make a required if with two fieds and one of them would be fill.
I try make a validator custom but when I clear a field the validator does not fire.

Can you help me please.

Thanks

What does this have to do with Drip?

Stumbled across this project looking for a drop-in form that works with Drip, but as far as I can tell there's no relation, so the name is super confusing. What does the word “drip” have to do with forms if not in relation to another service?

Add touches to Proxy Props of dripForm()

I want to get touches props by wrapped component because to aggregate errors.

Example

import { dripForm, dripFormField } from "react-drip-form";

const Input = dripFormField()(
  ({ input, meta: { error, dirty, touched }, ...rest }) => {
    return (
      <div>
        <input {...rest} {...input} />
      </div>
    );
  }
);

const Form = dripForm()(({ touches, errors, meta, handlers }) => {
  return (
    <form onSubmit={handlers.onSubmit}>
      <div className="input-form">
        <label>
          <span>Year</span>
          <Input type="text" name="year" />
        </label>
        <label>
          <span>Month</span>
          <Input type="text" name="date" />
        </label>
        <label>
          <span>Date</span>
          <Input type="text" name="date" />
        </label>
      </div>
      {meta.dirty && (touches.year || touches.month || touches.date) ? (
        <div className="input-error">
          <p>{errors.year}</p>
          <p>{errors.month}</p>
          <p>{errors.date}</p>
        </div>
      ) : (
        ""
      )}
    </form>
  );
});

wadackel / react-drip-form Goto Github PK

react-drip-form's Introduction

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

react-drip-form's People

Contributors

Stargazers

Watchers

Forkers

react-drip-form's Issues

Example

Recommend Projects

Recommend Topics

Recommend Org