react-render-props-form-validation v1.1.0

react-render-props-form-validation

React render props form component with validation

Install

npm install --save react-render-props-form-validation

Usage

import React, { Component } from 'react'
import { isEmail } from 'validator';
import Form from 'react-render-props-form-validation'

export default class App extends Component {
  state = { email: 'my@example.com' };

  rules = {
    email: [
      { errorMessage: 'Invalid e-mail.', rule: isEmail },
    ],
  };

  handleChange = ({ target: { name, value } }) => this.setState({ [name]: value });
  
  handleSubmit = (event, isValid, validation) => {
    if (!isValid) {
      event.preventDefault();
      return;
    }

    // Form submit logic here.
  }

  render () {
    return (
      <Form rules={this.rules} onSubmit={this.handleSubmit}>
        {validation => (
          <React.Fragment>
            <input type="email" name="email" value={this.state.email} onChange={this.handleChange} />
            {!validation.email.valid && (
              <ul>
                {validation.email.errors.map(err => <li key={err}>{err}</li>)}
              </ul>
            )}
          </React.Fragment>
        )}
      </Form>
    )
  }
}

License

MIT © nathantn