react-form-validator-components

Installation

npm i react-form-validator-components --save-dev  
yarn add react-form-validator-components --save

Components

Utilizes @material-ui and @material-ui/pickers under the hood
Implementation of several components based off of react-form-validator-core

To use with ValidatorForm

...
import { ValidatorForm, TextValidator } from 'react-form-validator-components'
...

render() {
  return (
    <ValidatorForm ref={r => (this.form = r)} onSubmit={this.handleSubmit}>
      <TextValidator
        name="name"
        value={this.props.name}
        validators={['required']}
        errorMessages="Name is required"
      />
    </ValidatorForm>
  );
}

To use with onBlur just pass the onBlur prop

render() {
  return (
    <ValidatorForm ref={r => (this.form = r)} onSubmit={this.handleSubmit}>
      <TextValidator
        name="name"
        value={this.props.name}
        onChange={handle individual changes to state here}
        onBlur={handle submission here}
      />
    </ValidatorForm>
  );
}

TextValidator (TextField)

Example with default value

<TextValidator
  label="Text"
  value={props.value}
  defaultValue={''}
/>

SelectValidator (Select)

Example with default value based on data in state and a label. A label requires inputProps id definitiion.

<SelectValidator
  label="Select Example"
  value={props.value}
  defaultValue={state.data[0].id}
  inputProps={{
    id: 'select-example'
  }}
>
    {this.props.children}
</SelectValidator>

DateValidator (DatePicker)

Example with default value

constructor(props) {
  super(props);
  this.state = {
   defaultValue: moment().format('YYYY-MM-DD')
  }
}
...
<DateValidator
  value={props.value}
  defaultValue={state.defaultValue}
/>

Usage

To use DateValidator

import MomentUtils from '@date-io/moment';

import { MuiPickerUtilsProvider } from 'react-form-validator-components'  
function App() {
  return (
    <MuiPickerUtilsProvider utils={MomentUtils} locale="en">
      <Root />
    </MuiPickerUtilsProvider>
  );
}

To provide a default value that will call onChange immediately if the value is false

<TextValidator
  value={null}
  defaultValue={'Text'}
  onChange={val => this.onChange(val)}
/>

This can be helpful in the case where the TextValidator is part of something such as Material Table. The editComponent holds its own value for the data, and is only updated onChange. So even if you provide an alternative to the TextValidator through

<TextValidator
  value={editProps.value || ''}
/>

The data held by Material Table will not be updated, then when you go to "submit" through Material Table, it will still show an invalid default value. Providing a defaultValue passes back the value immediately.