Usando Grommet In React Applications

Ao longo dos anos, o ecossistema React cresceu com a invenção de bibliotecas que auxiliam no desenvolvimento de aplicativos React. Neste tutorial, vamos aprender a usar o Grommet para desenvolver componentes responsivos, acessíveis e mobile-first para aplicativos React. Vamos dar uma olhada em seus conceitos principais, alguns de seus casos de uso e construir um exemplo simples. É importante observar que o Grommet é de código aberto com 6,9 mil estrelas no GitHub.

Este tutorial será benéfico para os leitores interessados ​​em desenvolver componentes responsivos em seu aplicativo React usando o Grommet. Este artigo requer uma compreensão básica dos componentes React e Styled.

O que é Grommet?

Grommet é uma biblioteca de componentes React que possui componentes de código mobile-first responsivos e acessíveis. Ele faz isso por meio de seus componentes – que são os blocos de construção da biblioteca. Eles incluem Layouts, Tipos, Cores, Controles, Entradas, Mídia de Visualizações e Utilitários. Todos os componentes do grommet são integrados com acessibilidade e capacidade de resposta em mente.

Grommet fornece suporte para as especificações do W3C, o que o torna um grande ponto em termos de acessibilidade. Ele também fornece temas e ferramentas poderosas que permitem personalizar sua cor, tipo, elementos componentes e necessidades de layout de acordo com as necessidades do seu projeto.

Algumas alternativas populares ao Grommet incluem tailwindcss e componentes com estilo, embora muito populares entre os desenvolvedores, cada estrutura difere na abordagem na construção de aplicativos. Grommet é mobile-first, acessível, responsivo e com temas prontos para uso e tem suporte para W3C para facilitar a criação de aplicativos React, enquanto Tailwind CSS é um framework altamente personalizável e utilitário que permite aos desenvolvedores construir aplicativos sem as restrições do CSS, como seu regras de cascata. Os componentes com estilo visam ajudar os desenvolvedores a escrever componentes React reutilizáveis, permitindo que escrevamos código CSS em nosso JavaScript usando literais de objeto e também usa componentes como construção de estilo de baixo nível.

Em nosso projeto, usaremos o Grommet em nossos projetos devido a seus componentes personalizáveis, acessibilidade e propriedades de tema que precisamos à medida que avançamos neste tutorial.

Usando componentes de ilhós

Grommet, como tantas outras bibliotecas de componentes, vem pré-construído com alguns componentes para layouts e temas, como componentes Box, Card e Header. Para usar primeiro você precisa instalar o pacote grommet usando NPM ou yarn, como o bloco de código abaixo.

 npm i grommet styled-components

Ou:

 yarn add grommet styled-components

Do acima, você pode ver que também instalamos styled-components. Isso ocorre porque Grommet usa componentes com estilo para personalizar estilos em componentes; é aconselhável instalar componentes com estilo em seus projetos.

Para usar um componente Grommet em um projeto React, você precisa importar grommet . Vamos construir um componente de cartão abaixo para explicar:

 import React from 'react'; import { Grommet, Card } from 'grommet'; export default function GrommetExample() { return ( <Card> <CardBody pad="medium">Body</CardBody> <Button icon={<Icons.Favorite color="red" />} hoverIndicator /> </Card> ); }

No bloco de código acima, primeiro importamos Grommet e o componente Card do pacote grommet para o seu arquivo, em seguida, agrupamos nosso componente usando o componente Card que importamos. Estilos podem ser adicionados a um componente Grommet como objetos como fizemos com o Button ou podem ser estilizados usando componentes com estilo.

Vamos ver mais exemplos de componentes Grommet examinando os componentes Form.

Por que Grommet?

O objetivo principal da Grommet é melhorar a experiência dos desenvolvedores e tornar mais rápida a construção de aplicativos React com seus componentes mobile-first, acessíveis e responsivos. Grommet alinha perfeitamente um design e um fluxo de trabalho do desenvolvedor para criar uma experiência perfeita, tornando muito fácil para qualquer pessoa começar.

O Grommet também fornece suporte para leitores de tela prontos para uso, variantes de tema como o modo escuro são obtidas do grommet pronto para uso e podem ser configuradas usando o prop themeMode em um aplicativo React, como abaixo.

 import React from "react"; import { Grommet, Box, Button, Heading, dark } from "grommet"; import { grommet } from "grommet"; const App = () => { const [darkMode, setDarkMode] = React.useState(false); return ( <Grommet full theme={grommet} themeMode={darkMode ? "dark" : "light"}> <Box pad="large"> <Heading level="1">Grommet Darkmode toggle</Heading> <Button label="Toggle Theme" primary alignSelf="center" margin="large" onClick={() => setDarkMode(!darkMode)} /> </Box> </Grommet> ); }; export default App;

No bloco de código acima, estamos usando a propriedade themeMode para adicionar um modo escuro. Usando um operador ternário, verificamos se a página está no modo escuro, podemos alternar para o modo claro, em seguida adicionamos um botão para alternar entre o modo claro e escuro em nosso aplicativo, você pode verificar aqui uma demonstração no Codesandbox.

Grommet também pode existir com outros frameworks e não adiciona um estilo global que afetará os componentes existentes em seu aplicativo React, funções e estilos podem ser interpolados em um literal de objeto para estilos. Grommet também possui componentes de Layout, que apresentam algumas propriedades CSS, como flexbox, ele também recebe todas as propriedades do flexbox como props.

Grommet apresenta uma grande biblioteca de ícones SVG que são acessíveis usando o componente <Icon /> , ao contrário de muitos outros frameworks. Grommet apresenta componentes para visualização de dados, como gráficos de barras, mapas e até rastreadores de progresso.

Várias empresas usam Grommet hoje para criar aplicativos do mundo real, incluindo Netflix, IBM, Sony, Samsung, Shopify, GitHub e Twilio.

Construindo um componente de preço com ilhós

Agora que conhecemos os conceitos básicos e principais do Grommet, vamos criar um componente de preços usando componentes Grommet, ele deve apresentar componentes como Cartão, Caixa e Botões da biblioteca Grommet.

Sem mais delongas, vamos começar!

Configurando seu ambiente

Primeiro, vamos criar uma aplicação React simples, escreva o bloco de código abaixo em seu terminal.

 create-react-app grommet-app

O código acima criará um aplicativo React simples usando o pacote create-react-app. Mova para o diretório do projeto.

 cd grommet-app

Em seguida é instalar as dependências que precisaríamos em nosso projeto.

 yarn add grommet styled-components

Se você fez isso, inicie o servidor de projeto usando o comando abaixo.

 yarn start

Para este projeto, precisaríamos de um único componente para nossos cartões e estilo com componentes com estilo.

Vamos criar o primeiro cartão abaixo

 import React from "react"; import styled from "styled-components"; export default function GrommetCard() { return ( <> <CardWrapper> <Card left> <Div> <Div> <CardContent> <small>Basic</small> <h1>$588</h1> </CardContent> <CardContent> <p>500 GB storage</p> </CardContent> <CardContent> <p>2 Users Allowed</p> </CardContent> <CardContent> <p>Send Up To 3 GB</p> </CardContent> </Div> <CardButton secondary>LEARN MORE</CardButton> </Div> </Card> </CardWrapper> </> ); }

No bloco de código acima, estamos usando o componente CardWrapper para agrupar todos os nossos componentes de Card , em seguida adicionamos um novo componente, CardContent , que é usado para agrupar todo o nosso conteúdo em cada componente de cartão. O componente CardButton é um componente de botão usado em cartões no Grommet.

Em seguida, vamos criar estilos para nosso aplicativo usando styled-components. Escreva o arquivo abaixo:

 const primaryGradient = "linear-gradient(hsl(236, 72%, 79%), hsl(237, 63%, 64%))"; const CardWrapper = styled.div` display: flex; justify-content: center; align-items: center; height: max-content; margin: 20px; @media all and (max-width: 1240px) { flex-direction: column; } `;

Acima, definimos um objeto de estilo para nosso CardWrapper em nosso aplicativo. Vamos adicionar objetos de estilo para nosso componente Card acima.

 const Card = styled.div` min-width: 380px; box-shadow: 3px -2px 19px 0px rgba(50, 50, 50, 0.51); border-radius: ${(props) => (props.left ? " 6px 0 0 6px" : props.right ? "0 6px 6px 0" : "6px")}; background: ${(props) => (props.secondary === undefined ? "#fff" : primaryGradient)}; padding: 25px 20px; height: ${(props) => (props.center ? "520px" : "480px")}; display: flex; justify-content: center; align-items: center; @media all and (max-width: 1240px) { margin-bottom: 20px; border-radius: 6px; height: 480px; } @media all and (max-width: 420px) { min-width: 90%; } `;

Vamos adicionar mais estilos aos nossos componentes.

 const CardButton = styled.div` min-width: 100%; padding: 10px 15px; min-height: 50px; box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2), 0px 0px 2px rgba(0, 0, 0, 0.2); color: ${(props) => (props.secondary !== undefined ? "#fff" : "#7c7ee3")}; background: ${(props) => (props.secondary === undefined ? "#fff" : primaryGradient)}; text-align: center; margin-top: 25px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; border-radius: 6px; `; const CardContent = styled.div` width: 100%; color: ${(props) => (props.secondary !== undefined ? "#fff" : "#000")}; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1.3px solid #eee; text-align: center; `; const Div = styled.div` min-width: 100%; `;

Depois de fazer tudo isso, nosso projeto deve ficar parecido com a imagem abaixo.

Precisamos adicionar mais cartões ao nosso componente usando o bloco de código abaixo.

 <Card center secondary> <Div> <Div> <CardContent secondary> <small>Premium</small> <h1>$788</h1> </CardContent> <CardContent secondary> <p>75 GB storage</p> </CardContent> <CardContent secondary> <p>4 Users Allowed</p> </CardContent> <CardContent secondary> <p>Send Up To 5 GB</p> </CardContent> </Div> <CardButton>LEARN MORE</CardButton> </Div> </Card> <Card right> <Div> <Div> <CardContent> <small>PRO</small> <h1>$1000</h1> </CardContent> <CardContent> <p>1TB storage</p> </CardContent> <CardContent> <p>Unlimited Users Allowed</p> </CardContent> <CardContent> <p>Send Up To 10 GB</p> </CardContent> </Div> <CardButton secondary>LEARN MORE</CardButton> </Div> </Card> </CardWrapper> </> ); }

Aqui, criamos mais dois componentes de cartão, adicionando nossos próprios componentes personalizados com componentes de estilo e usamos os objetos de estilo que definimos acima para envolver nossos componentes Grommet e melhorar o estilo.

Nosso aplicativo de cartão de preço final deve se parecer com a imagem abaixo.

Usando Grommet em produção (aplicativo de lista de construção)

Para ver um exemplo de como seria usar o Grommet em outro aplicativo, vamos construir um aplicativo simples que permitirá ao usuário adicionar, visualizar e excluir itens da lista. Usaremos a API React Context incorporada para gerenciar o estado do aplicativo, Grommet para nossos componentes de interface do usuário e componentes de estilo para estilizar nosso aplicativo.

Novamente, vamos inicializar um aplicativo de reação usando o comando abaixo.

 create-react-app list-app

cd no diretório do projeto

 cd list-app

 yarn add grommet grommet-controls grommet-icons styled-components

No bloco de código acima, instalamos:

Construindo o contexto do aplicativo

No aplicativo, precisamos compartilhar os dados do usuário em vários componentes, para conseguir isso, usaríamos a Context API. Com isso, podemos criar um App Context que conteria as listas e a lógica da nossa aplicação. Você pode conferir este artigo para saber mais sobre a API de contexto.

Para criar nosso contexto de aplicativo, primeiro crie uma pasta chamada context no diretório src de nossa aplicação, em seguida crie um arquivo chamado AppContext.js este será o arquivo para todo nosso contexto de aplicativo, vamos fazer isso no bloco de código abaixo:

 import React, { createContext, useState } from 'react'; export const Context = createContext(); const AppContext = ({children}) => { const [lists, setLists] = useState([]); const removeList = item => { let newLists = [...lists]; lists.map((list, id) => { return list === item && newLists.splice(id, 1); }); setLists(newLists); }

No bloco de código acima, importamos o hook da API de contexto createContext e o hook useState todos do React, usando o componente useState , criamos um estado central para nossa aplicação, isso foi feito para que o componente possa atuar como Context Provider para outros componentes em nossa aplicação. Em seguida, criamos uma nova variável chamada removeList que recebe um item como parâmetro, usando o operador spread estamos espalhando o que está no estado e separando o objeto que é igual ao item que queremos remover.

Em seguida, usaremos a lógica acima para criar métodos para adicionar e excluir itens de lista em nossa aplicação, fazemos isso no bloco de código abaixo:

 return ( <Context.Provider value={{ lists, addToLists: (newItem) => setLists([...lists, newItem]), deleteFromList: (item) => removeList(item) }}> {children} </Context.Provider> ) } export default AppContext;

Aqui, estamos retornando o Context.Provider e aceitando props filhos, estamos fazendo isso para que outro componente possa acessar as propriedades que passamos na prop value, inicializamos o objeto de lists para receber em nossas listas, o método addToList recebe um parâmetro newItem para adicionar novas listas ao estado do nosso aplicativo e o deleteFromList remove ou exclui um item do armazenamento de listas.

Construindo o componente de lista

Nesta seção, vamos construir nosso componente List usando Grommet para nossos componentes de UI e styled-components para estilizar algumas partes de nossa UI. Primeiro, crie uma pasta de componentes dentro do diretório src da nossa aplicação, depois dentro da pasta de componentes, crie um novo arquivo List.js e dentro dele escreva o código abaixo.

 import React from "react"; import styled from "styled-components"; import { Card, CardBody, Box, Text, Button } from "grommet"; function List(props) { return ( <StyledDiv> <Card> <CardBody className="card_body"> <Box direction="row" className="item_box"> <Text className="text">{props.list}</Text> <Box className="button_box"> <Button onClick={props.deleteList.bind(this, props.list)} className="button" > Delete </Button> </Box> </Box> </CardBody> </Card> </StyledDiv> ); } export default List;

No código acima, primeiro importamos os componentes Card, CardBody, Box, Text e Button do grommet, em seguida criamos um componente List para receber props, usando os componentes Grommet criamos um componente de cartão com um botão delete que será adicionado automaticamente ao uma lista. O próximo é estilizar nosso componente abaixo:

 const StyledDiv = styled.div` .button { background-color: #8b0000; color: white; padding: 10px; border-radius: 5px; } .card_body { padding: 20px; margin-top: 20px; } .item_box { justify-content: space-between; } .text { margin-top: auto; margin-bottom: auto; } `;

Depois de fazer o acima, nosso componente deve se parecer com a imagem abaixo.

Construindo o componente de exibição de lista

Este componente exibe todas as listas que adicionamos e também gera automaticamente um botão de exclusão assim que uma nova lista é adicionada.

 import React from "react"; import List from "./List"; import { Context } from '../context/AppContext'; function ListDisplay() { return ( <Context.Consumer> {(context) => ( <div className="container"> {context.lists.length ? context.lists.map((list, id) => ( <List key={id} list={list} deleteList={context.deleteFromList} /> )) : null } </div> )} </Context.Consumer> ); } export default ListDisplay;

Neste componente, criamos uma função ListDisplay e a encapsulamos usando o Context.Consumer do nosso componente appContext , em seguida usando uma div para nossa tag container, desestruturamos os métodos list e deleteList do contexto do app, fazendo isso podemos conseguir para passá-los como adereços. Em seguida, mapeamos as lists para retornar uma nova lista, que podemos usar na construção de uma única lista passando o objeto retornado como props para o componente List .

Nosso componente deve ficar assim com listas adicionadas:

Componente NavBar

Este componente será a maior parte de nossa aplicação, aqui vamos escrever nosso componente usando o Context.Consumer e similar aos nossos outros componentes, vamos estilizar com componentes estilizados para estilizar. Vamos construir este componente abaixo.

 import React, { useState } from "react"; import { Heading, Form, TextInput, Button } from "grommet"; import styled from "styled-components"; import { Context } from '../context/AppContext'; function Navbar() { const [value, setValue] = useState(""); return ( <Context.Consumer> {store => ( <StyledDiv className="container"> <Heading className="title">Grommet List App</Heading> <Form onSubmit={() => store.addToLists(value)} className="form-group"> <TextInput className="form" value={value} type="text" onChange={(e) => setValue(e.target.value)} placeholder="Enter item" /> <Button type='submit' className="button">Add to List</Button> </Form> </StyledDiv> )} </Context.Consumer> ); } const StyledDiv = styled.div` .button { margin-top: 10px; background-color: purple; color: white; padding: 10px; border-radius: 5px; } `; export default Navbar;

Primeiro, para acessar as propriedades no provedor de contexto do aplicativo, agrupamos nosso componente em um componente Context.Consumer . Em seguida, adicionamos uma tag Heading do Grommet e criamos um formulário de entrada para adicionar nossas listas usando o método addToList que recebe um parâmetro de valor (no nosso caso, o valor é a entrada do usuário). Por último, mas não menos importante, adicionamos um botão Enviar para lidar com o envio do formulário.

Uma vez feito corretamente, nosso aplicativo deve ficar assim:

Conclusão

Neste artigo, aprendemos sobre o Grommet, uma biblioteca de componentes com capacidade de resposta e acessibilidade em mente. Também passamos pelo processo de criação de um aplicativo de componente de preços usando Grommet e um aplicativo de lista. Divirta-se usando o Grommet para suas necessidades de componentes e UI para seu próximo aplicativo React. O código para o aplicativo de lista Grommet pode ser encontrado no Codesandbox e o componente de preços pode ser encontrado aqui.

Recursos

• Documentos de ilhós
• Uma introdução ao Grommet
• Introdução à API de contexto do React