🏴‍☠️ 🏇🏾 🛫 10 componentes de reacción para todas las ocasiones 🕺🏿 🏿 👿

Creo que para resolver varias tareas de desarrollo de React es mejor usar pequeñas herramientas altamente especializadas, en lugar de soluciones universales ofrecidas por las bibliotecas de componentes. Me gusta elegir componentes por mi cuenta, no me gusta leer documentación extensa y quiero evitar actualizaciones de biblioteca sin sentido, después de lo cual algo a menudo falla en un proyecto.

Una determinada biblioteca de aplicaciones para usuario puede proporcionar al desarrollador un diseño uniforme de componentes, lo cual es extremadamente importante. Pero puede resultar que el proyecto en el que se planea utilizar dicha biblioteca ya tenga su propio sistema de diseño o su propia biblioteca de interfaz de usuario. En tal situación, el desarrollador no está buscando una nueva biblioteca, sino solo componentes personalizados adecuados para reutilizar y acelerar el trabajo. En tal caso, veo más sentido en la búsqueda de un componente separado, en lugar de una biblioteca completa, que contiene, al mismo tiempo, lo que un desarrollador realmente necesita, muchas cosas que absolutamente no necesita.

El material, cuya traducción publicamos hoy, está dedicado a la historia de 10 componentes React.

1. Reacciona el control deslizante impresionante - "carruseles"

El componente React Awesome Slider te permite crear transiciones suaves, hermosas y altamente personalizables. Este es un componente muy pequeño (7 Kb) que admiten todos los principales navegadores. Aquí hay una página de demostración de React Awesome Slider.

2. Reaccionar cuadrícula de datos - tablas

React Data Grid es un componente potente, rápido y fácil de usar que le permite mostrar algo así como una hoja de cálculo de Excel en una página. Sabe cómo procesar comandos de teclado, copiar y pegar datos y, en general, se comporta como una hoja de cálculo. Este componente proporciona al desarrollador una API simple, que puede ser tratada muy rápidamente. Vea ejemplos de su uso aquí .

3. CogoToast - notificaciones

Encontrar un componente para implementar notificaciones, dado cuántos componentes existen, no es una tarea fácil. Hay muchos componentes excelentes de este tipo, pero aquí me gustaría hablar sobre mi favorito, sobre el CogoToast simple y comprensible . El paquete de componentes es de tamaño modesto (4 Kb), tiene una API simple y su apariencia ordenada es muy adecuada para muchos proyectos. Aquí está la página de GogoToast con ejemplos del uso de este componente.

4. Google Maps React - mapas

Google Maps React es un componente bastante popular que acelera y facilita la colocación (con coordenadas) de otros componentes React en un mapa de Google.

5. React Tooltip - información sobre herramientas

React Tooltip es un componente de implementación de información sobre herramientas que admite muchas configuraciones. Se adapta bien a cualquier diseño de interfaz. Este componente le permite hacer cualquier cosa que necesite con información sobre herramientas. Por ejemplo, admite eventos personalizados, retrasos, actualizaciones interactivas para contenido de información sobre herramientas y más.

6. React Block UI - pantallas de carga y bloqueo

React Block UI es un componente fácil de usar que evita que los usuarios interactúen con la interfaz de la página mientras cargan cualquier cosa.

7. Reaccionar tarjetas de crédito: formulario para ingresar datos de pago

No planeé incluir en esta revisión algo como "el mejor componente para ingresar datos de pago", pero React Credit Cards es solo un componente encantador del que no puedo dejar de hablar. Es personalizable, trabajar con él es simple y agradable. Entre otras cosas, determina automáticamente a qué compañía corresponde el número de tarjeta ingresado y luego muestra la imagen de la tarjeta con el logotipo correspondiente.

8. React Markdown: representación del marcado Markdown

React Markdown es una solución rápida y conveniente para representar el marcado de Markdown (incluido HTML). Él, como los otros componentes de esta revisión, solo puede resolver un problema, pero hace su trabajo muy bien.

9. Coloreact: una herramienta para elegir colores

Muchas bibliotecas de interfaz de usuario proporcionan a los desarrolladores sus propias herramientas para elegir colores, pero Coloreact combina el equilibrio perfecto entre facilidad de uso y personalización. Permite al desarrollador personalizar su apariencia y comportamiento, sin requerir mucho tiempo para estudiar sus propios mecanismos.

10. Reaccionar calendario grande - Calendario

Si necesita un componente de calendario equipado con todas las funciones que se encuentran en los calendarios "profesionales", esto significa que debe echar un vistazo a React Big Calendar . Le brinda al desarrollador muchas oportunidades y configuraciones: funciones del planificador, localización, formato de fecha y hora, y mucho más.

¡Queridos lectores! ¿Qué componentes de React altamente especializados utiliza con mayor frecuencia?

10 componentes de reacción para todas las ocasiones