{"id":20742481,"url":"https://github.com/VWApplications/vwapp-react-components","last_synced_at":"2025-05-11T03:33:17.230Z","repository":{"id":82151630,"uuid":"254549915","full_name":"VWApplications/vwapp-react-components","owner":"VWApplications","description":"Tudo que precisa para criar novo projetos react.","archived":false,"fork":false,"pushed_at":"2020-05-09T00:57:01.000Z","size":4696,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-18T23:18:18.947Z","etag":null,"topics":["bootstrap","bootstrap4","components","react","styles"],"latest_commit_sha":null,"homepage":"https://victordeon.github.io/vwapp-react-components/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/VWApplications.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-10T05:16:26.000Z","updated_at":"2020-11-08T18:36:47.000Z","dependencies_parsed_at":"2023-03-01T02:31:05.150Z","dependency_job_id":null,"html_url":"https://github.com/VWApplications/vwapp-react-components","commit_stats":null,"previous_names":["victordeon/vwapp-react-components"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VWApplications%2Fvwapp-react-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VWApplications%2Fvwapp-react-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VWApplications%2Fvwapp-react-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VWApplications%2Fvwapp-react-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VWApplications","download_url":"https://codeload.github.com/VWApplications/vwapp-react-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253514352,"owners_count":21920327,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","bootstrap4","components","react","styles"],"created_at":"2024-11-17T07:05:54.512Z","updated_at":"2025-05-11T03:33:16.537Z","avatar_url":"https://github.com/VWApplications.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vwapp-react-components\n\nComponentes customizados usando o bootstrap4 de forma mais legivel em react.\n\nOs componentes de formulário foram passados para a lib: [vwapp-react-form](https://github.com/VictorDeon/vwapp-react-form)\n\n[![NPM](https://img.shields.io/npm/v/vwapp-react-components.svg)](https://www.npmjs.com/package/vwapp-react-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n## Instalação.\n\n```bash\nnpm install --save vwapp-react-components\n```\n\n## Uso\n\n```jsx\nimport React, { Fragment } from 'react';\nimport { FlexContainer, FlexItem as Box, Line, BreakLine } from 'vwapp-react-components';\nimport styled from 'styled-components';\n\nconst FlexItem = styled(Box)`\n  background-color: green;\n  text-align: center;\n  margin: 10px;\n  padding: 5px;\n`\n\nexport default () =\u003e (\n  \u003cFragment\u003e\n    \u003cFlexContainer reverse direction=\"row\" justify=\"center\" align=\"center\" className=\"bg-dark\" style={{height: \"200px\"}}\u003e\n      \u003cFlexItem\u003e01\u003c/FlexItem\u003e\n      \u003cFlexItem\u003e02\u003c/FlexItem\u003e\n    \u003c/FlexContainer\u003e\n    \u003cLine /\u003e\n    \u003cFlexContainer wrap direction=\"col\" justify=\"center\" align=\"stretch\" className=\"bg-dark\" style={{height: \"200px\"}}\u003e\n      \u003cFlexItem\u003e01\u003c/FlexItem\u003e\u003cFlexItem\u003e02\u003c/FlexItem\u003e\u003cFlexItem\u003e03\u003c/FlexItem\u003e\u003cFlexItem\u003e04\u003c/FlexItem\u003e\u003cFlexItem\u003e05\u003c/FlexItem\u003e\n      \u003cFlexItem\u003e06\u003c/FlexItem\u003e\u003cFlexItem\u003e07\u003c/FlexItem\u003e\u003cFlexItem\u003e08\u003c/FlexItem\u003e\u003cFlexItem\u003e09\u003c/FlexItem\u003e\u003cFlexItem\u003e10\u003c/FlexItem\u003e\n      \u003cFlexItem\u003e11\u003c/FlexItem\u003e\u003cFlexItem\u003e12\u003c/FlexItem\u003e\u003cFlexItem\u003e13\u003c/FlexItem\u003e\u003cFlexItem\u003e14\u003c/FlexItem\u003e\u003cFlexItem\u003e15\u003c/FlexItem\u003e\n      \u003cFlexItem\u003e16\u003c/FlexItem\u003e\u003cFlexItem\u003e17\u003c/FlexItem\u003e\u003cFlexItem\u003e18\u003c/FlexItem\u003e\u003cFlexItem\u003e19\u003c/FlexItem\u003e\u003cFlexItem\u003e20\u003c/FlexItem\u003e\n      \u003cFlexItem\u003e21\u003c/FlexItem\u003e\u003cFlexItem\u003e22\u003c/FlexItem\u003e\u003cFlexItem\u003e23\u003c/FlexItem\u003e\u003cFlexItem\u003e24\u003c/FlexItem\u003e\u003cFlexItem\u003e25\u003c/FlexItem\u003e\n      \u003cFlexItem\u003e26\u003c/FlexItem\u003e\u003cFlexItem\u003e27\u003c/FlexItem\u003e\u003cFlexItem\u003e28\u003c/FlexItem\u003e\u003cFlexItem\u003e29\u003c/FlexItem\u003e\u003cFlexItem\u003e30\u003c/FlexItem\u003e\n    \u003c/FlexContainer\u003e\n    \u003cLine /\u003e\n    \u003cFlexContainer direction=\"row\" justify=\"center\" align=\"stretch\" className=\"bg-dark\" style={{height: \"200px\"}}\u003e\n      \u003cFlexItem order=\"3\" length=\"100px\"\u003e01\u003c/FlexItem\u003e\n      \u003cFlexItem grow order=\"2\" align=\"center\"\u003e02\u003c/FlexItem\u003e\n      \u003cFlexItem grow order=\"0\"\u003e03\u003c/FlexItem\u003e\n      \u003cFlexItem shrink order=\"1\"\u003e04\u003c/FlexItem\u003e\n      \u003cFlexItem grow order=\"4\"\u003e05\u003c/FlexItem\u003e\n    \u003c/FlexContainer\u003e\n    \u003cBreakLine /\u003e\n  \u003c/Fragment\u003e\n);\n```\n\n## Documentação\n\nAlém das propriedades especificas de cada componente, também pode ser inserido outras propriedades como: id, className, ...\n\n### 1. Flexbox\n\nComponentes para facilitar o uso do flexbox.\n\n![1](https://user-images.githubusercontent.com/14116020/79192401-fd1e2d80-7dfe-11ea-8182-9389c5b0f288.png)\n\n![2](https://user-images.githubusercontent.com/14116020/79192403-fe4f5a80-7dfe-11ea-9991-5e8d4f109eda.png)\n\n![3](https://user-images.githubusercontent.com/14116020/79192406-fee7f100-7dfe-11ea-9fa3-f632410ca5cc.png)\n\n#### Componentes\n\n* FlexContainer\n* FlexItem\n\n#### Propriedades (FlexContainer)\n\nAs imagens estão organizados em direction **row**, **col**, e **wrap** respectivamente. Exceção do atributo **wrap** que ta organizado em false e true.\n\n* **as**: Substitui a tag padrão (```\u003cdiv\u003e```) do component, por exemplo, ```\u003cFlexContainer as=\"ul\"\u003e```.\n\n* **direction**: Empilha os itens horizontalmente ou verticalmente, ou seja, da esquerda para a direita ou de cima para baixo. (String - padrão: \"row\" - css: flex-direction).\n\n  - **row**: Empilha os itens horizontalmente, ou seja, da esquerda para a direita.\n\n    ![direction row](https://user-images.githubusercontent.com/14116020/79188973-ec69b980-7df6-11ea-9e4c-a8a035b74528.png)\n\n  - **col**: Empilha os itens verticalmente, ou seja, de cima para baixo.\n\n    ![direction col](https://user-images.githubusercontent.com/14116020/79189041-191dd100-7df7-11ea-9276-93536d052ce2.png)\n\n* **wrap**: Faz com que os itens ao chegar no limite passe para a próxima linha ou coluna. (Booleano - padrão: false - css: flex-wrap)\n\n  nowrap\n  ![nowrap](https://user-images.githubusercontent.com/14116020/79189115-508c7d80-7df7-11ea-821e-8e3ac2ee675a.png)\n\n  wrap\n  ![wrap](https://user-images.githubusercontent.com/14116020/79189173-73b72d00-7df7-11ea-8d81-263ab5075404.png)\n\n* **reverse**: Inverte a ordem dos itens definidas no atributo \"direction\" ou \"wrap\". Ele também inverte o alinhamento do atributo \"justify\" (Booleano - padrão: false - css: flex-direction e flex-wrap).\n\n  row\n  ![reverse row](https://user-images.githubusercontent.com/14116020/79189242-9fd2ae00-7df7-11ea-969a-d41d264a6322.png)\n\n  col\n  ![reverse col](https://user-images.githubusercontent.com/14116020/79189323-d3add380-7df7-11ea-9079-5a1795ee83f3.png)\n\n  wrap\n  ![reverse wrap](https://user-images.githubusercontent.com/14116020/79189419-11126100-7df8-11ea-9394-6bd8e8887aa3.png)\n\n* **justify**: Alinha todos os itens do container verticalmente (col) ou horizontalmente (row). (String - padrão: \"initial\" - css: justify-content).\n\n  - **start**: Alinha os itens no começo.\n\n    row\n    ![start row](https://user-images.githubusercontent.com/14116020/79189741-eecd1300-7df8-11ea-9d03-c4b40363ee3b.png)\n\n    col\n    ![start col](https://user-images.githubusercontent.com/14116020/79189779-099f8780-7df9-11ea-9850-6a1d3b297866.png)\n\n  - **end**: Alinha os itens no final.\n\n    row\n    ![end row](https://user-images.githubusercontent.com/14116020/79189832-2a67dd00-7df9-11ea-81ef-ff7a36418c6b.png)\n\n    col\n    ![end col](https://user-images.githubusercontent.com/14116020/79189894-4d928c80-7df9-11ea-864a-803e4eb27fae.png)\n\n  - **center**: Alinha os itens no centro.\n\n    row\n    ![center row](https://user-images.githubusercontent.com/14116020/79190002-90ecfb00-7df9-11ea-8d8e-7ca8e64398ec.png)\n\n    col\n    ![center col](https://user-images.githubusercontent.com/14116020/79190059-b37f1400-7df9-11ea-867d-67cc092ef69a.png)\n\n  - **space-around**: Alinha os itens com espaçamentos ao redor deles.\n\n    row\n    ![space-around row](https://user-images.githubusercontent.com/14116020/79190272-4029d200-7dfa-11ea-9328-ab6ef4230979.png)\n\n    col\n    ![space-around col](https://user-images.githubusercontent.com/14116020/79190314-60f22780-7dfa-11ea-95fc-25cb519d4d56.png)\n\n  - **space-between**: Alinha os itens com espaçamentos entre eles.\n\n    row\n    ![space-between row](https://user-images.githubusercontent.com/14116020/79190154-f0e3a180-7df9-11ea-9317-ac266120c4c9.png)\n\n    col\n    ![space-between col](https://user-images.githubusercontent.com/14116020/79190232-212b4000-7dfa-11ea-910e-8aea857d1397.png)\n\n* **align**: Alinha todos os itens do container verticalmente (row) ou horizontalmente (col). (String - padrão: \"initial\" - css: align-items ou align-content). O \"align-content\" é ativado se o container tiver o atributo \"wrap\" setado nele, ou seja, ele alinha os conjuntos de itens como um todo. Caso contrário é ativado o \"align-items\" que alinha os itens separadamente.\n\n  - **start**: Alinha os itens no começo.\n\n    row\n    ![start row](https://user-images.githubusercontent.com/14116020/79190412-a0207880-7dfa-11ea-8df1-64bbb75e58bb.png)\n\n    col\n    ![start col](https://user-images.githubusercontent.com/14116020/79190485-d65df800-7dfa-11ea-8dbe-22d096ee1d17.png)\n\n  - **end**: Alinha os itens no final.\n\n    row\n    ![end row](https://user-images.githubusercontent.com/14116020/79190553-fb526b00-7dfa-11ea-8c3c-647ae484c84a.png)\n\n    col\n    ![end col](https://user-images.githubusercontent.com/14116020/79190610-1cb35700-7dfb-11ea-96ce-da042c0c7bfa.png)\n\n  - **center**: Alinha os itens no centro.\n\n    row\n    ![center row](https://user-images.githubusercontent.com/14116020/79190749-6bf98780-7dfb-11ea-8486-5a9456e97ace.png)\n\n    col\n    ![center col](https://user-images.githubusercontent.com/14116020/79190804-8c294680-7dfb-11ea-86f6-9117057c5115.png)\n\n  - **stretch**: Preenche os itens no container.\n\n    row\n    ![stretch row](https://user-images.githubusercontent.com/14116020/79190895-c2ff5c80-7dfb-11ea-9d5e-2b0133cd1680.png)\n\n    col\n    ![stretch col](https://user-images.githubusercontent.com/14116020/79190995-f4782800-7dfb-11ea-8d0c-8c0fe7e7f10b.png)\n\n  - **baseline**: Alinha os itens tendo como base seu texto. Só funciona com o wrap **não** setado. css: \"align-items\".\n\n    row\n    ![baseline row](https://user-images.githubusercontent.com/14116020/79189741-eecd1300-7df8-11ea-9d03-c4b40363ee3b.png)\n\n    col\n    ![baseline col](https://user-images.githubusercontent.com/14116020/79189779-099f8780-7df9-11ea-9850-6a1d3b297866.png)\n\n  - **space-around**: Alinha os itens com espaçamentos ao redor deles. Só funciona com o wrap setado. css: \"align-content\".\n\n    row\n    ![space-around row](https://user-images.githubusercontent.com/14116020/79191272-8f710200-7dfc-11ea-9d43-664a65a2bc69.png)\n\n    col\n    ![space-around col](https://user-images.githubusercontent.com/14116020/79191348-b8919280-7dfc-11ea-9ab4-d92c31d26982.png)\n\n  - **space-between**: Alinha os itens com espaçamentos entre eles. Só funciona com o wrap setado. css: \"align-content\".\n\n    row\n    ![space-between row](https://user-images.githubusercontent.com/14116020/79191408-e545aa00-7dfc-11ea-8933-3e0fc4164f24.png)\n\n    col\n    ![space-between col](https://user-images.githubusercontent.com/14116020/79191453-ff7f8800-7dfc-11ea-835a-f9da7c7ce7bd.png)\n\n#### Propriedades (FlexItem)\n\n* **order**: Ordena os itens da forma que for inserido. Só é aceito valores de 1-12 e todos os itens devem ser preenchidos.\nOu seja, a lista de itens só pode ter no máximo 12 itens. (String - Opcional - css: order)\n\n  ![order](https://user-images.githubusercontent.com/14116020/79191541-38b7f800-7dfd-11ea-85e4-9e8260aaaae5.png)\n\n* **grow**: Faz o item crescer proporcionalmente em relação aos demais, preenchendo a linha. (Booleano - default: false - css: flex-grow)\n\n  ![grow](https://user-images.githubusercontent.com/14116020/79191663-76b51c00-7dfd-11ea-8242-41590930ae18.png)\n\n* **shrink**: Não deixe o item diminuir tanto quanto os outros itens. (Booleano - default: false - css: flex-shrink)\n\n  ![shrink](https://user-images.githubusercontent.com/14116020/79188973-ec69b980-7df6-11ea-9e4c-a8a035b74528.png)\n\n* **length**: Configura um tamanho inicial para o item em pixels. (String - Opcional - css: flex-basis).\n\n  ![length](https://user-images.githubusercontent.com/14116020/79191725-a49a6080-7dfd-11ea-91c8-4f4ceaa7a4fb.png)\n\n* **align**: Especifica o alinhamento do item selecionado dentro do conteiner. A propriedade substitui o alinhamento do atributo \"align\" definido no container. (String - Opcional - css: align-self).\n\n  - **start**: Alinha o item no começo.\n\n    ![start](https://user-images.githubusercontent.com/14116020/79192006-47eb7580-7dfe-11ea-992f-0da3382066c7.png)\n\n  - **end**: Alinha o item no final.\n\n    ![end](https://user-images.githubusercontent.com/14116020/79191924-183c6d80-7dfe-11ea-8ae3-50c5e73be08c.png)\n\n  - **center**: Alinha o item no centro.\n\n    ![center](https://user-images.githubusercontent.com/14116020/79191830-dad7e000-7dfd-11ea-95ab-0bf42bf8ee74.png)\n\n  - **stretch**: Preenche o item no container.\n\n    ![stretch](https://user-images.githubusercontent.com/14116020/79192050-5e91cc80-7dfe-11ea-92da-9d441e8cdb4b.png)\n\n  - **baseline**: Alinha o item tendo como base seu texto.\n\n    ![start](https://user-images.githubusercontent.com/14116020/79192006-47eb7580-7dfe-11ea-992f-0da3382066c7.png)\n\n#### Exemplo\n\n```jsx\n\u003cFlexContainer reverse direction=\"row\" justify=\"center\" align=\"space-around\"\u003e\n  \u003cFlexItem\u003e01\u003c/FlexItem\u003e\n  \u003cFlexItem\u003e02\u003c/FlexItem\u003e\n\u003c/FlexContainer\u003e\n\n\u003cFlexContainer wrap direction=\"col\" justify=\"center\" align=\"stretch\"\u003e\n  \u003cFlexItem\u003e01\u003c/FlexItem\u003e\u003cFlexItem\u003e02\u003c/FlexItem\u003e\u003cFlexItem\u003e03\u003c/FlexItem\u003e\u003cFlexItem\u003e04\u003c/FlexItem\u003e\u003cFlexItem\u003e05\u003c/FlexItem\u003e\u003cFlexItem\u003e06\u003c/FlexItem\u003e\u003cFlexItem\u003e07\u003c/FlexItem\u003e\u003cFlexItem\u003e08\u003c/FlexItem\u003e\u003cFlexItem\u003e09\u003c/FlexItem\u003e\u003cFlexItem\u003e10\u003c/FlexItem\u003e\u003cFlexItem\u003e11\u003c/FlexItem\u003e\u003cFlexItem\u003e12\u003c/FlexItem\u003e\u003cFlexItem\u003e13\u003c/FlexItem\u003e\u003cFlexItem\u003e14\u003c/FlexItem\u003e\u003cFlexItem\u003e15\u003c/FlexItem\u003e\u003cFlexItem\u003e16\u003c/FlexItem\u003e\u003cFlexItem\u003e17\u003c/FlexItem\u003e\u003cFlexItem\u003e18\u003c/FlexItem\u003e\u003cFlexItem\u003e19\u003c/FlexItem\u003e\u003cFlexItem\u003e20\u003c/FlexItem\u003e\u003cFlexItem\u003e21\u003c/FlexItem\u003e\u003cFlexItem\u003e22\u003c/FlexItem\u003e\u003cFlexItem\u003e23\u003c/FlexItem\u003e\u003cFlexItem\u003e24\u003c/FlexItem\u003e\u003cFlexItem\u003e25\u003c/FlexItem\u003e\u003cFlexItem\u003e26\u003c/FlexItem\u003e\u003cFlexItem\u003e27\u003c/FlexItem\u003e\u003cFlexItem\u003e28\u003c/FlexItem\u003e\u003cFlexItem\u003e29\u003c/FlexItem\u003e\u003cFlexItem\u003e30\u003c/FlexItem\u003e\n\u003c/FlexContainer\u003e\n\n\u003cFlexContainer direction=\"row\" justify=\"center\" align=\"stretch\"\u003e\n  \u003cFlexItem order=\"3\" length=\"100px\"\u003e01\u003c/FlexItem\u003e\n  \u003cFlexItem grow order=\"2\" align=\"center\"\u003e02\u003c/FlexItem\u003e\n  \u003cFlexItem grow order=\"0\"\u003e03\u003c/FlexItem\u003e\n  \u003cFlexItem shrink order=\"1\"\u003e04\u003c/FlexItem\u003e\n  \u003cFlexItem grow order=\"4\"\u003e05\u003c/FlexItem\u003e\n\u003c/FlexContainer\u003e\n);\n```\n\n### 2. Pagination\n\nComponentes relacionados a criação de paginações.\n\n#### Componentes\n\n* Pagination\n\n#### Propriedades especificas:\n\n* **totalItens**: Total de itens que será paginado. (Inteiro - obrigatório)\n\n* **activePage**: Página ativa pelo usuário na função handlePagination. (Inteiro - obrigatório)\n\n* **itemPerPage**: Quantidade de itens que aparecerá por páginas. (Inteiro - default 20)\n\n* **pageRange**: Quantidade de páginas que irá aparecer no componente de cada vez. (Inteiro - default 5)\n\n* **firstPageText**: Título ou Icone que ao clicar vai voltar para a primeira página. (String - default \"Primeiro\")\n\n* **lastPageText**: Título ou Icone que ao clicar vai redirecionar para a última página. (String - default \"Último\")\n\n* **prevPageText**: Título ou Icone que ao clicar vai voltar para a página anterior. (String - default \"\u003c\u003c\")\n\n* **nextPageText**: Título ou Icone que ao clicar vai avançar para a próxima página. (String - default \"\u003e\u003e\")\n\n* **handlePagination**: Função que irá tratar a paginação. (Função - Obrigatório).\n\n#### Exemplo:\n\n```jsx\n\u003cPagination\n  totalItens={60}\n  itemPerPage={20}\n  activePage={this.state.activePage}\n  handlePagination={this.__handlePagination}\n/\u003e\n```\n\n## Contribuir\n\n#### 1. Como rodar o ambiente de desenvolvimento:\n\nRode os dois comandos abaixo em 2 abas diferentes. O primeiro comando vai ficar observando modificações do seu pacote e o segundo\ncomando consome essas modificações no html.\n\nNo diretorio raiz rode o npm start\n\n```\nnpm start\n```\n\nNo diretorio example rode o npm start.\n\n```\ncd example\nnpm start\n```\n\n#### 2. Como instalar ou remove um pacote.\n\nPara instalar um novo pacote tem que fazer o seguinte comando:\n\n```\nnpm install --save-dev nome-do-pacote\n```\n\nCom ele instalado tem que coloca-lo no package.json\n\n```json\n\"dependencies\": {\n  \"nome-do-pacote\": \"^versao\",\n  \"...\": \"...\"\n},\n\"peerDependencies\": {\n  \"nome-do-pacote\": \"^versao\",\n  \"...\": \"...\"\n}\n```\n\nCom isso, teste se esse pacote está sendo utilizado, caso não rode o npm install e reinicie os servidores.\n\n#### 3. Publicar no npmjs\n\n1. Crie uma conta no https://www.npmjs.com/\n2. Execute no terminal ```npm login``` e logar com as credenciais criadas no npmjs\n3. Execute ```npm publish``` na pasta do projeto\n4. E então use em outros projetos!\n\n#### 4. Publicar documentação github pages\n\nRode o comando para criar uma pagina com a build do projeto example do seu repositório.\n\n```\nnpm run deploy\n```\n\n#### 5. Atualizando um projeto.\n\nVersões: MAJOR.MINOR.PATCH\n\n* **MAJOR**: Versão em que fizeste modificações incompatives com versões anteriores, ou seja, que irá quebrar algo anteriormente feito.\n* **MINOR**: Quando você adicionar funcionalidades que são compativeis com versões anteriores.\n* **PATCH**: Correções de erros/bugs compativeis com versões anteriores.\n\n## Licença\n\nMIT © [VictorDeon](https://github.com/VictorDeon)\n\nCriado a partir do pacote: [Create React Library](https://github.com/transitive-bullshit/create-react-library)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FVWApplications%2Fvwapp-react-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FVWApplications%2Fvwapp-react-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FVWApplications%2Fvwapp-react-components/lists"}