Naughty Platypus Memorabilia

    @polvo-labs/form-utils

    1.0.23 • Public • Published

    form-utils

    Travis npm package Coveralls

    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>

    Install

    npm i @polvo-labs/form-utils

    DownloadsWeekly Downloads

    3

    Version

    1.0.23

    License

    MIT

    Unpacked Size

    31.8 kB

    Total Files

    14

    Last publish

    Collaborators

    • gsantiago
    • polvo