Nectar of the Programming Masses

    react-sistemando-form

    1.2.4 • Public • Published

    react-sistemando-form

    Formularios mais comuns usados nos projetos - Bootstrap

    NPM JavaScript Style Guide

    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'
        },
      ];

    Licença

    © Daniel Felix

    Keywords

    none

    Install

    npm i react-sistemando-form

    DownloadsWeekly Downloads

    0

    Version

    1.2.4

    License

    none

    Unpacked Size

    159 kB

    Total Files

    8

    Last publish

    Collaborators

    • aynoei