@polvo-labs/form-utils

form-utils

This module provides a set of helpers for validating and formatting data, specially made for using with react-final-form module.

CODESANDBOX WITH EXAMPLES

Installation

yarn add @polvo-labs/form-utils

Usage

// Import the helpers you want to use
import {
  required,
  emailRequired,
  phone,
} from "@polvo-labs/form-utils";

// You can import all helpers too
import * as formUtils from "@polvo-labs/form-utils";

Each helper, is an object with the following structure:

{
  type, // in react native, this will be replaced by `keyboardType` or `secureTextEntry` for example
    parse,
    format,
    validate;
}

You can inject them directly into the <Field /> component:

<Container>
  <Field name="name" component="input" {...required} />
  <Field name="email" component="input" {...emailRequired} />
  <Field name="phone" component="input" {...phone} />
</Container>

Or, you can simply use them to format or parse your data:

import { phone } from "@polvo-labs/form-utils";

phone.format("41999999999");
// => '41 9-9999-9999'

phone.parse("41 9-9999-9999");
// => '41999999999'

Set default messages

You can set the default validation messages with the setDefaultMessages function:

import { setDefaultMessages } from "@polvo-labs/form-utils";

// Set the default messages for `required` and `email` validators.
setDefaultMessages({
  required: "Este campo é obrigatório",
  email: "Informe um e-mail válido",
});

Available Helpers

required

email / emailRequired

password / passwordRequired

match

<React.Fragment>
  <Field
    name="password"
    label="Password"
    component={FormField}
    {...forms.passwordRequired}
  />
  <Field
    name="password_confirm"
    label="Password confirm"
    component={FormField}
    validate={forms.match.validate({
      field: "password",
      message: "Passwords do not match",
    })}
  />
</React.Fragment>

cpf / cpfRequired

phone / phoneRequired

cep / cepRequired

currency / currencyRequired

integer / integerRequired

pastOrCurrentYear / pastOrCurrentYearRequired

cardNumber / cardNumberRequired

cardExpiry / cardExpiryRequired

cardCode / cardCodeRequired

sqlDate / sqlDateRequired

birthdate / birthdateRequired

length / lengthRequired

<React.Fragment>
  <Field
    name="name"
    label="Name"
    component={FormField}
    {...forms.lengthRequired({
      min: 5, // the default is 0
      max: 100, // the default is 255
    })}
  />
</React.Fragment>

bankAgency / bankAgencyRequired

bankAccount / bankAccountRequired