mg-getLoader

Install

npm install --save mg-getloader

Usage

import React, { Component } from 'react'

import MyComponent from 'mg-getloader'


const routers = [
  {
    router: "/",
    Page: Home,
    exact: true,
    param: "",
    data: {
      config: {
        Site_Config: "object",
      },
      require: {
        home: {
          apresentacao: "object"
        }
      }
    }
  }
];

function App(props) {

  return (
    <div>
      <Router>
        <Switch>
          {routers.map((d, k) => (
            <Route
              key={k}
              path={`${process.env.PUBLIC_URL + d.router + d.param}`}
              exact={d.exact}
              render={props => <VerifLoader
                {...props}
                data={d}
                Loader={(<>Loader</>)}
              />}
            />
          ))}
          <Route exact component={NotFound} />
        </Switch>
      </Router>
    </div>
  );
}

routers

O array router representa todos os dados necessários para o roteamento e busca de dados da página.

É recomendado que seja criado um arquivo separado para agrupar todos od dados de roteamento.

Routers | type | descrição --- | --- | --- router | string | rota acessada param | string | parametros da rota Page | component | Componente exibibo após busca exact | boolean | significa que a rota deve ser exata data | object | deve receber os dados das páginas buscadas na base da aplicação

data

O objeto data dentro de routers[n] informa ao metodo todos os dados que devem ser buscados para a página. Os dados se dividem em três principais metodos.

config

busca dados de configuração da página

require

busca de dados prioritários da página

optinal

busca de dados opicionais da página

      require: {
        home: {

            // requerendo string
          exemplo_1: "string",

            // requerendo numeros
          exemplo_2: "number",

            // requerendo objeto
          exemplo_3: "object",
          exemplo_4: {},

            // requerendo array
          exemplo_5: "array",
          exemplo_6: [],

            // criando cadeia de requerimento
          exemplo_7: {
            apresentacao: {
                title: "string"
            },
            carousel: [{
                title: "string",
                img: "string"
            }]
          }
        }
      }

explicando

Usamos o grupo de require por conveniência, pois essa ordem deve ser mantida por todos os grupos de dados.

#config

informe aqui de os dados das páginas de configuração que devem ser baixadas antes antes dos dados do site. Para isso, informe um objeto semelhante ao das rotas

• será necessário informar de maneira literal os verificadore"

      config: {
        configuracoes: "object",
        layout: "object"
      }

License

MIT © [claudio magalhaes](https://github.com/claudio magalhaes)