👨🏾‍🎨 👩‍🎨 🏪 10 Reagir componentes para todas as ocasiões 💪🏼 💪 👨‍💻

Acredito que, para resolver várias tarefas de desenvolvimento do React, é melhor usar pequenas ferramentas altamente especializadas, em vez de soluções universais oferecidas pelas bibliotecas de componentes. Gosto de escolher componentes por conta própria, não gosto de ler documentação longa e quero evitar atualizações sem sentido da biblioteca, após as quais algo geralmente falha em um projeto.

Uma certa biblioteca front-end é capaz de fornecer ao desenvolvedor um design uniforme de componentes, o que é extremamente importante. Mas pode acontecer que o projeto no qual ele planeja usar essa biblioteca já tenha seu próprio sistema de design ou sua própria biblioteca de interface do usuário. Em tal situação, o desenvolvedor não está procurando uma nova biblioteca, mas apenas componentes personalizados adequados para reutilizar e acelerar o trabalho. Nesse caso, vejo mais sentido na busca por um componente separado, em vez de uma biblioteca inteira, que contém, ao mesmo tempo, o que um desenvolvedor realmente precisa, muitas coisas que ele absolutamente não precisa.

O material, cuja tradução publicamos hoje, é dedicado à história dos 10 componentes do React.

1. Reação do controle deslizante impressionante - "carrosséis"

O componente React Awesome Slider permite criar transições suaves, bonitas e altamente personalizáveis. Este é um componente muito pequeno (7 Kb) suportado por todos os principais navegadores. Aqui está uma página de demonstração do React Awesome Slider.

2. Grade de dados do React - tabelas

O React Data Grid é um componente poderoso, rápido e fácil de usar que permite exibir algo como uma planilha do Excel em uma página. Ele sabe como processar comandos do teclado, copiar e colar dados e, em geral, se comporta como uma planilha geralmente se comporta. Este componente fornece ao desenvolvedor uma API simples, que pode ser tratada muito rapidamente. Veja exemplos de seu uso aqui .

3. CogoToast - notificações

Encontrar um componente para implementar notificações, considerando quantos componentes existem, não é uma tarefa fácil. Existem muitos componentes excelentes desse tipo, mas aqui eu gostaria de falar sobre o meu favorito, sobre o CogoToast simples e compreensível . O pacote do componente é modesto em tamanho (4 Kb), possui uma API simples e sua aparência elegante é adequada para muitos projetos. Aqui está a página GogoToast com exemplos de uso deste componente.

4. Google Maps React - mapas

O Google Maps React é um componente bastante popular que acelera e facilita o posicionamento (com coordenadas) de outros componentes do React em um mapa do Google.

5. Reativar dica de ferramenta - dicas de ferramenta

O React Tooltip é um componente de implementação de dica de ferramenta que suporta muitas configurações. Cabe bem com qualquer design de interface. Este componente permite que você faça o que for necessário com dicas de ferramentas. Por exemplo, ele suporta eventos personalizados, atrasos, atualizações interativas para conteúdo de dicas de ferramentas e muito mais.

6. React Block UI - telas de carregamento e bloqueio

A interface do usuário do React Block é um componente fácil de usar que impede que os usuários interajam com a interface da página enquanto carregam algo.

7. Reagir cartões de crédito - formulário para inserir dados de pagamento

Não pretendia incluir nesta análise algo como "o melhor componente para inserir dados de pagamento", mas o React Cards é apenas um componente encantador do qual não posso deixar de falar. É personalizável, trabalhar com ele é simples e agradável. Entre outras coisas, determina automaticamente a qual empresa o número do cartão digitado corresponde e, em seguida, exibe a imagem do cartão com o logotipo correspondente.

8. React Markdown - renderização da marcação Markdown

O React Markdown é uma solução rápida e conveniente para renderizar a marcação Markdown (incluindo HTML). Ele, como os outros componentes desta revisão, pode resolver apenas um problema, mas ele faz seu trabalho muito bem.

9. Coloreact - uma ferramenta para escolher cores

Muitas bibliotecas de interface do usuário fornecem aos desenvolvedores suas próprias ferramentas para escolher cores, mas o Coloreact combina o equilíbrio perfeito entre facilidade de uso e personalização. Ele permite que o desenvolvedor personalize sua aparência e comportamento, sem precisar de muito tempo para estudar seus próprios mecanismos.

10. Reagir Big Calendar - Calendário

Se você precisar de um componente de calendário equipado com todos os recursos dos calendários "profissionais" - isso significa que você deve dar uma olhada no React Big Calendar . Oferece ao desenvolvedor muitas oportunidades e configurações - funções do agendador, localização, formatação de data e hora e muito mais.

Queridos leitores! Quais componentes do React altamente especializados você costuma usar?

10 Reagir componentes para todas as ocasiões