Ao criar sites, há muitos aspectos a serem considerados para garantir que seu site tenha uma ótima aparência e um bom desempenho.
Nesta postagem, veremos as dez principais bibliotecas de componentes React Grid não classificadas que o ajudam a construir layouts de grade de ótima aparência e desempenho.
O que é React-grid-layout?
React-grid-layout (RGL) é um layout de grade arrastável e redimensionável com pontos de interrupção responsivos personalizáveis para aplicativos React. O layout do ponto de interrupção pode ser gerado automaticamente ou criado pelo usuário. RGL é somente React e não requer jQuery.
Um ótimo recurso do RGL é que você pode adicionar ou remover widgets de seu layout sem reconstruir a grade inteira.
Alguns de seus principais recursos incluem:
- Pontos de interrupção responsivos
- Widgets arrastáveis
- Widgets redimensionáveis
- Compatível com aplicativos renderizados por servidor
React-grid-layout brilha quando você deseja construir algo como um painel de métricas com widgets arrastáveis, como:
Com mais de 12,7 mil estrelas, 6,5 mil usuários e 7,9 milhões de downloads em GitHub , esse layout de grade é usado e amado por muitos desenvolvedores.
Rebass
Rebass é uma biblioteca de componentes de IU do React que vem com Reflexbox , um sistema de layout de grade responsivo para React.
O Reflexbox fornece dois componentes para o layout de sua aplicação react: flex e box. O componente flex define o contêiner de layout, enquanto o componente de caixa especifica os itens no contêiner.
Ele também tem algo chamado de variantes, que permite definir diferentes variações em seu tema e aplicá-las por elemento. As variantes são ótimas no componente da caixa quando você deseja que os itens no contêiner de layout (flex) tenham variações distintas.
Além disso, o Reflexbox segue a especificação de tema , tornando mais fácil para configurar a grade de layout com qualquer fornecedor de tema de sua escolha e ter as mesmas especificações de design, como cores, espaçamento e tipografia em seu aplicativo.
Aqui estão alguns dos principais recursos do Reflexbox:
- Valores ergonômicos responsivos baseados em matriz
- Componentes de estilo primitivo para todas as suas necessidades de layout
- Temático e compatível com a especificação do tema
- Construído com emoção, com suporte para componentes estilizados
O próprio Rebass está crescendo rapidamente, tem 7,1 mil estrelas, 7,1 mil usuários e 73,99 mil downloads por semana em GitHub .
React-flexbox-grid
React-flexbox-grid é um conjunto de React componentes que implementam flexboxgrid.css com o poder dos módulos CSS. Flexbox Grid é um sistema de grade baseado na propriedade flex display.
Com modificadores responsivos, você pode especificar diferentes deslocamentos, alinhamentos e tamanhos de coluna em janelas de visualização pequenas, médias e grandes. O redimensionamento de linhas e colunas é fluido porque o React-flexbox-grid usa largura baseada em porcentagem.
A largura automática permite adicionar um número ilimitado de colunas de dimensionamento automático a uma linha, e a grade descobre o dimensionamento adequado para cada coluna.
Atualmente, ele tem 2,8 mil estrelas, 7,3 mil usuários e 132 mil downloads por mês em GitHub .
Auto-responsivo-react
Auto-responsive-react é uma biblioteca de layout responsivo para construção responsiva Reaja os aplicativos.
Se você está procurando uma maneira fácil de realizar animações simples e sutis no redimensionamento da página, esta biblioteca faz o trabalho para você. Você pode controlar a função de tempo de transição passando valores CSS função de tempo de transição regulares (ou seja, linear, atenuação, etc.).
Um bom caso de uso para esta biblioteca é quando você está construindo algo como uma galeria de imagens. Aqui está um exemplo .
Atualmente com 1,4 mil estrelas, 240 usuários e 2 mil downloads por mês no GitHub , Auto-responsive-react é simples, mas poderoso.
Ilhó
Atualmente na versão 2, Grommet é uma estrutura baseada em React que “fornece acessibilidade , modularidade, capacidade de resposta e temas em um pacote arrumado ”, de acordo com seu site. Ele oferece um componente de grade para definir o conteúdo.
Com apenas um valor booleano, você pode definir se deseja ou não que os tamanhos de margem e preenchimento sejam dimensionados para o ambiente móvel.
É fácil construir seus aplicativos para diferentes tamanhos de tela usando pontos de interrupção responsivos, o que torna mais fácil definir alterações de layout usando esses pontos de interrupção.
Esta biblioteca incrível oferece uma ótima experiência para o layout do seu aplicativo. Atualmente, ele tem 7 mil estrelas, 5,8 mil usuários e 79 mil downloads por mês no GitHub .
React-grid-system
Com 587 estrelas, 3,7 mil usuários e 71 mil downloads por mês no GitHub , React-grid-system é um responsivo sistema de grade construído para aplicativos de reação e fortemente inspirado no Bootstrap .
Ele oferece recursos como definir pontos de interrupção e larguras de canal por meio do contexto Reacts.
Ele fornece três componentes para a criação de grades responsivas: container, row e col. Isso é semelhante ao que Rebass faz com o Reflexbox, mas a diferença é que o Reflexbox usa as propriedades do flexbox enquanto o react-grid-system cria o layout definindo as linhas e colunas para os itens da grade.
React-stonecutter
React-stonecutter é um componente de layout de grade animado para React. Para animação, você pode escolher entre CSS Transitions ou React-Motion .
O React-stonecutter oferece um layout semelhante ao do Pinterest com alturas variadas e lida com animações de maneira elegante usando transições CSS com valores de propriedade de transformação regulares ou com React-motion.
Além disso, ele oferece measureItems , uma função de ordem superior para quando você não sabe a altura de seus itens com antecedência. Você pode usar esta função para medir os itens no navegador antes do layout.
Atualmente, react-stonecutter tem 1.1k estrelas e 343 usuários no GitHub , é uma biblioteca divertida de se brincar e dá conta do recado.
React-Bootstrap
React-Bootstrap é uma biblioteca de componentes React que adota o núcleo do Bootstrap 4, portanto, ele se baseia em temas de bootstraps, folhas de estilo e semelhantes.
Semelhante a como o react-grid-system funciona, o React-Bootstrap oferece um componente de layout que funciona com uma série de contêineres, linhas e colunas para o conteúdo do layout. Ele é construído com flexbox e é totalmente responsivo.
Ele também oferece layout automático para colunas de grade do flexbox, portanto, quando você define ou altera a largura de uma coluna, as colunas irmãs são redimensionadas automaticamente em torno dela.
Com 18,9 mil estrelas e 373 mil usuários no GitHub , React-Bootstrap definitivamente vale a pena conferir.
react-stack-grid
react-stack-grid é outra biblioteca de componentes de grade que fornece um layout semelhante ao do Pinterest para a construção de aplicativos de reação.
react-stack-grid tem um recurso chamado método updateLayout () que é útil quando você deseja atualizar manualmente o layout se o tamanho de um item muda após uma ação-como um evento de clique-ocorrer.
Outro recurso importante é como ele lida com animações de redimensionamento de página. Você pode escolher entre uma variedade de atenuações e valores de transição.
Você deve considerar o uso desta biblioteca quando quiser construir galerias de imagens. Tem 796 estrelas e mais de 1.000 usuários no GitHub . Eu amo como isso é personalizável. Confira esta demonstração para ter uma boa ideia de como funciona.
Hedron
De acordo com seu site oficial, “ Hedron é um sistema de grade flexbox simples para React, alimentado por componentes estilizados. ”
Ele oferece três recursos distintos:
- Adicione pontos de interrupção ilimitados ao seu layout para controlar facilmente a aparência das colunas e linhas da grade em diferentes janelas de visualização
- Qualquer propriedade pode ser alterada por qualquer ponto de interrupção, permitindo que você personalize seu layout em diferentes tamanhos de tela
- Modo de depuração, que permite visualizar facilmente seu layout
Atualmente, Hedron tem 846 estrelas, 179 usuários e 28 mil downloads no GitHub . Procurando construir painéis? Confira Hedron.
Conclusão
Neste artigo, cobrimos 10 componentes da grade React e bibliotecas para 2021. Todas são ferramentas excelentes para usar, então tudo se resume aos objetivos do projeto e às preferências pessoais ao escolher uma.
A postagem 10 principais componentes do React Grid e as bibliotecas para 2021 apareceram primeiro no LogRocket Blog .
