react-drip-form

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

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

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>
    );
  }
}