Lib formulario-lib

Uma lib contendo componentes React basicos para formularios

Instalando

Primeiro instale o pacote com o npm.

$ npm install formulario-lib

Usando formulario-lib

Componente Input

Para usar o input

import { Input } from "formulario-lib";

function App() {

  return (
    <form>
      <Input
        erro={false}
        label="Email"
        messageErro="ERRO"
        name="email"
        value={email}
        type="email"
        onchange={onchange}
        onblur={validaEmail}
      />
    </form>
  );
}

export default App;

Os tipos de dados aceitos:

  value: string;
  label: string;
  name: string;
  id?: string;
  erro: boolean;
  messageErro: string;
  onchange?: (event: React.ChangeEvent<HTMLInputElement> ) => void;
  onblur?: (event: React.FocusEvent<HTMLInputElement>) => void;
  type?:'email' | 'text' | 'number' | 'tel' | 'password' | 'date' | 'datetime';
  margin?: 'normal' | 'dense' | 'none';

Componente Button

Para usar o componente Button

import { Button } from "formulario-lib";

function App() {

  const onclick = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault()
    console.log('enviado.')
  }

  return (
    <form>
      <Button onclick={onclick}>Enviar</Button>
    </form>
  );
}

export default App;

Os tipos de dados aceitos por Button são:

  children: ReactNode
  variant?: 'dark' | 'light';
  onclick: (e:  React.MouseEvent<HTMLButtonElement>) => void;
  type?: 'submit' | 'button' | 'reset';
  name?: string;