naveteam/titan

Nave Form

Form creation made easy by Nave.rs. This package is an abstraction of react-hook-form.

Installation

npm install --save nave-form

Usage

import React from 'react'
import { Form, Input, If, ArrayOf } from 'nave-form'

const App = () => {
  const onSubmit = data => console.log(data)

  return (
    <Form onSubmit={onSubmit} unmask>
      <Input
        name='cpf'
        pattern='cpf'
        required='Campo obrigatório'
        placeholder='000.000.000-00'
        label='CPF'
        variant='material'
      />
      <Input
        name='cnpj'
        pattern='cnpj'
        required='Campo obrigatório'
        placeholder='00.000.000/0000-00'
        label='CNPJ'
        variant='material'
      />
      <Input
        name='bornDate'
        mask='date'
        validate='date'
        required='Campo obrigatório'
        placeholder='00/00/0000'
        label='Data de Nascimento'
        variant='material'
      />
      <Input
        name='zipCode'
        pattern='zipCode'
        required='Campo obrigatório'
        placeholder='00000-000'
        label='CEP'
        variant='material'
      />
      <If conditions={[{ cpf: '042.104.390-37' }]}>
        <Input
          name='amount'
          pattern='currency'
          required='Campo obrigatório'
          placeholder='R$ 0.000,00'
          label='Patrimônio'
          variant='material'
        />
      </If>
      <ArrayOf name='pets'>
        <Input
          name='name'
          required='Campo obrigatório'
          placeholder='Tobias Bittencourt'
          label='Nome do Pet'
          variant='material'
        />
        <Input name='specie' required='Campo obrigatório' placeholder='Cachorro' label='Espécie' variant='material' />
        <Input
          name='cpf'
          pattern='cpf'
          required='Campo obrigatório'
          placeholder='000.000.000-00'
          label='CPF'
          variant='material'
        />
      </ArrayOf>

      <button type='submit'>submit</button>
    </Form>
  )
}

export default App

This includes validations and masks (can be used separately with props mask and validate or together with pattern prop)

Avaliable Input Patterns

• Date
• Currency
• CPF
• CNPJ
• Zip Code

Other avaliable functions

• Unmask fields passing a prop unmask on Form
• Conditionally render fields using the If component
• Render arrays of fields using the ArrayOf component
• Render component material-like using the variant prop on Input

License

MIT © eduardobittencourt