React-sistemando-form NPM

react-sistemando-form

Formularios mais comuns usados nos projetos - Bootstrap

Instalação

Instale o react-sistemando-form.

npm install --save react-sistemando-form

O react-sistemando-form não inclui Bootstrap CSS, portanto, também precisa ser instalado:

npm install --save bootstrap

Importe o CSS Bootstrap no arquivo src/index.js:

import 'bootstrap/dist/css/bootstrap.min.css';

Importe o componente react-sistemando-form necessário dentro do arquivo src/App.js ou seus arquivos de componentes personalizados:

import Formulario from 'react-sistemando-form'

Uso

import React, { Component } from 'react'

import Formulario from 'react-sistemando-form'

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={() => 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'
    },
  ];