Package lib-formulario

Uma Lib React para realizar criação de formulario.   Acesse o link do repositório do package no site oficial NPM.   Acesse o link do repositório do Github.

Como usar

Para instalar o package bastar rodar o comando abaixo.

$ npm install lib-formulario

Component Input

O Componente Input tem os seguintes tipos 'email', 'text', 'number', 'tel', 'password', 'date', 'datetime'.   Abaixo um exemplo de uso do componente.

import { Input } from 'lib-formulario';

function App() {
  return (
    <>
      <Input
          id='email'
          type='email'
          placeholder='Seu email'
          required={true}
          erro={true}
          messageErro='erro'
          border='normal'
          />
    </>
  );
}

export default App;

O componente <Input/> pode receber os seguintes valores:

| Key | Tipagem | Valor Opcional ? | | ----------- | ---------------------------------------------------------------- | ---------------- | | id | string | Não | | label | string | Sim | | placeholder | string | Sim | | name | string | Sim | | type | 'email', 'text', 'number', 'tel', 'password', 'date', 'datetime' | Sim | | value | string, number | Sim | | maxlength | number | Sim | | erro | boolean | Sim | | messageErro | string | Sim | | border | 'normal', 'none' | Não | | required | boolean | Sim | | mask | boolean | Sim | | valueMask | 'tel', 'date', 'dateFull' | Sim | | onchange | (e: React.ChangeEvent) => void | Sim | | onblur | (e: React.FocusEvent) => void | Sim | | oninvalid | (e: React.FormEvent) => void | Sim |

Você pode passar uma Key mask={true} e valueMask={'tel'} para criar uma máscara (11) 1 1111 - 1111 no input.

Component InputList

O Componente InputList criar um input com listagem.   O Componente recebe um array.   Abaixo um exemplo de como usar o componente.

import { InputList } from 'lib-formulario';

function App() {
  return (
    <>
      <InputList
        label='Mes'
        lista={['janeiro', 'fevereiro']}
        name='mes'
        border='normal'
        required={true}/>
    </>
  );
}

export default App;

O Componente <InputList/> recebe os seguintes valores:

| Key | Tipagem | Valor Opcional ? | | -------- | ------------------------------------------- | ---------------- | | label | string | Sim | | lista | string[] | Não | | name | string | Não | | value | string | Sim | | border | 'normal', 'none' | Sim | | required | boolean | Sim | | onchange | (e: React.ChangeEvent) => void | Sim |

O Component Button

O Componente Button criar um botão.   Abaixo um exemplo de como usar o componente.

import { Button } from 'lib-formulario';

function App() {
  return (
    <>
      <Button type='submit'>Enviar</Button>
    </>
  );
}

export default App;

O Componente <Button/> recebe os seguintes valores:

| Key | Tipagem | Valor Opcional ? | | -------- | ------------------------------------------------ | ---------------- | | type | 'button', 'submit', 'reset' | Não | | children | ReactNode | Não | | color | string | Sim | | onclick | (e: React.MouseEvent) => void | Sim |

Você pode passar uma key color={"#fff"} para mudar a cor do background do botão.