Welcome React Hooks

Breaking Changes

We made several changes to use the new hooks to simplify the process to create new libs.
See HOW_TO_USE.md for details

ConfigBuilder and new prop

ConfigBuilder

• addValidator: proxy for Validator.register
• addValidatorAsync: proxy for Validator.registerAsync
• setValidatorAttributeFormatter: Validator.setAttributeFormatter

See:
https://github.com/skaterdav85/validatorjs#register-custom-validation-rules
https://github.com/skaterdav85/validatorjs#asynchronous-validation
https://github.com/skaterdav85/validatorjs#custom-attribute-names // Configure global formatter.

Props

• validationAttributeNames: Object to transpile attr names.

See:
https://github.com/skaterdav85/validatorjs#custom-attribute-names // Or configure formatter for particular instance.

New Config Builder

A simple and fluent way to config you lib:

import ConfigBuilder from '@react-form-fields/core/config/builder';
import { setConfig } from '@react-form-fields/core/config';
import lang from '@react-form-fields/core/lang/pt-br';

const config = new ConfigBuilder()
  .fromLang(lang)
  .addMask('money', value => '$' + value, value => value.replace(/\D/gi, ''))
  .build();

setConfig(config);

If your lib has and extra config:

import { IConfig } from '@react-form-fields/core/config';
import CoreConfigBuilder from '@react-form-fields/core/config/builder';

export default class ConfigBuilder extends CoreConfigBuilder {
  public setDateConfig(locale: any, format: string) {
    this.config = {
      ...this.config,
      dateLocale: locale,
      dateFormat: format,
      dateLabels: labels
    };

    return this;
  }
}

Breaking changes

• Moved @react-form-fields/core/mask/common/pt-br and @react-form-fields/core/validator/custom-languages/pt-br to the new lang folder: @react-form-fields/core/lang/pt-br

New way to register a component

Breaking Change

Instead of calling the this.super() methods for yours components, call the new ValidationContextRegister.

 render() {
    const { label, name } = this.props;

    return (
      <Fragment>
-        {super.render()} 
+        <ValidationContextRegister field={this} />

        <label>{label} {this.isRequired ? '*' : ''}</label>