sistemando-formulario-bs
v0.1.4
Published
Formularios mais comuns usados nos projetos - Bootstrap
Downloads
12
Readme
Formularios com React-Hook-Form e Bootstrap
Formularios mais comuns usados nos projetos - Bootstrap
Instalação
Instale o sistemando-formulario-bs.
npm install --save sistemando-formulario-bs
Importe o componente sistemando-formulario-bs necessário dentro do arquivo src/App.js ou seus arquivos de componentes personalizados:
import Formulario from 'sistemando-formulario-bs'
Uso
import React, { Component } from 'react'
import Formulario from 'sistemando-formulario-bs'
class Example extends Component {
render() {
return <Formulario
returnData={(ret) => console.log(ret)}
fields={formFields}
formData={[{
buttons: [
<button type="submit" className="float-right" color="dark" key={0}>Salvar</button>,
<button color="danger" className="float-right" onClick={(e) => console.log(e)} key={1}>Cancelar</button>
]
}]}
/>
}
}
Opções/Props
returnData = dados retornados do formulario fields = array dos campos dos formulários formData = configurações do elemento form
const formFields = [
{
element:'cols',//colunas de campos
cols:[//campos do formulario
{
element: 'textarea',
label: "Obserações",
name: "pessoa_fisica_obs",
help: 'Digite alguma coisa'
},{
element: 'checkbox',
label: "Telef",
name: "pessoa_fisica_checkbox_2",
required: true,
options: [{value:1, label:'Fundação James Fanstone'},{value:2, label:'Fasa'}],
inline: true,
help: 'Digite alguma coisa'
}]
},
{
element: 'select',//campo tipo select
multi: false,
label: "Orgão Vinculado",
name: "pessoa_fisica_orgao",
options: options,
optionsSelected: [options[0]],
required: false
},
{
element: 'input',//campo tipo input
label: "Telefone",
classInput: "telefone",
name: "pessoa_fisica_telefone",
required: false,
help: 'Digite alguma coisa',
mask: 'cnpj'//com máscara
},
{
element: 'tag',//campo tipo input tag
label: "Nome",
name: "pessoa_fisica_nome",
required: false,
value: tags,
mask: 'telefone'//com máscara
},
{
element: 'tag',
label: "Email",
name: "pessoa_fisica_email",
required: false,
value: [],
mask: 'email',
help: 'Aperte enter ou tab após digitar',
classInput: "telefone",
},{
element: 'checkbox',//campo tipo checkbox
label: "Telefones",
name: "pessoa_fisica_checkbox",
required: true,
options: [{value:1, label:'Fundação James Fanstone'},{value:2, label:'Fasa'}],
inline: true,
help: 'Digite alguma coisa'
},
{
element: 'radio',//campo tipo radiobox
label: "Telefone",
name: "pessoa_fisica_radiobox",
required: false,
options: [{value:1, label:'Fundação James Fanstone'},{value:2, label:'Fasa'}],
inline: true,
},
{
element: 'textarea',//campo tipo text-area
label: "Obserações",
name: "pessoa_fisica_obs",
help: 'Digite alguma coisa'
},
];