README

form-utils

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

Installation

yarn add @polvo-labs/form-utils ramda

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'

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>

Usage no npm install needed!