4 razones para usar Chakra UI en tu próximo proyecto

¿Qué es Chakra UI?

La página de inicio de ChakraUI indica que es una biblioteca de componentes simple, modular y accesible que te permite crear apps de React con rapidez. Después de entregar algunos proyectos en los que usamos Chakra, puedo estar de acuerdo con esta descripción. Crear interfaces de usuario nunca había sido tan rápido y cómodo.

Quizá ya conozcas bibliotecas como MaterialUI, Ant Design o React Bootstrap. Y puede que te preguntes por qué necesitas otra librería de UI cuando ya tienes un amplio abanico de opciones probadas en batalla. Pues bien, Chakra destaca principalmente por sus excelentes utilidades integradas, accesibilidad y alto nivel de personalización.

Las ventajas de Chakra UI

Fácil de personalizar

Una de las mayores ventajas de ChakraUI es que puedes adaptarlo fácilmente a las necesidades de tu diseño. Normalmente empiezas con tu tema personalizado para especificar cosas como colores, tamaños de fuente, breakpoints para diseño responsive, sombras y mucho más. Eso ya te da mucha flexibilidad al crear UIs avanzadas, pero no es todo.

Cada componente que uses acepta muchas props que puedes aprovechar para estilizarlo. 

Por ejemplo, veamos un uso sencillo del componente `<Button>` en Chakra UI:

 ```jsx <Button colorScheme="teal" variant="outline" size="lg" isLoading={loading} loadingText="Loading"> Click me </Button>

Con este poco código, Chakra renderiza un botón con los estilos definidos en el tema. 

Pero ahora usemos unas cuantas props para cambiar su estilo: 

```jsx <Button colorScheme="red" variant="solid" size="md" isLoading={false}> Click me </Button>

En este fragmento, cambiamos el esquema de color del botón para usar una paleta roja y modificamos su variante para que tenga un fondo sólido. También lo redimensionamos a mediano y establecemos isLoading en false.

Veámoslo. Primero, cambiamos el esquema de color del botón para que use una paleta teal. Luego, cambiamos su variante para que, en vez de fondo completo, solo tenga un borde. Después hacemos todo el botón más grande. Además de los estilos, podemos cambiar el comportamiento del botón. Cuando el valor de “isLoading” es true, ocultamos el icono y mostramos un loader que acepta varias props. ¡Tanto el icono como el loader también forman parte de ChakraUI!

Si alguna vez has usado TailwindCSS, que está ganando popularidad últimamente, o Styled System, verás algunas similitudes. Tailwind es un conjunto de clases CSS que puedes usar para componer componentes. Por su parte, Styled System y Chakra te dan el componente completo, pero puedes cambiar estilos concretos usando props. Todas estas soluciones tienen muchos fans y detractores. Estos últimos mencionan una gran desventaja: el código puede perder legibilidad debido a la gran cantidad de clases/props. Por supuesto, puede ser un problema, así que es esencial mantener nuestros componentes concisos.

Soporte de modo oscuro

El modo oscuro se ha convertido en una parte integral de nuestra vida tecnológica. Podemos usarlo en smartphones, portátiles y, por supuesto, en sitios web. Aunque no todos los proyectos requieran implementar modo oscuro, es genial que Chakra simplifique el proceso. Por defecto, la mayoría de los componentes de Chakra son compatibles con modo oscuro. Solo necesitas un poco de configuración y listo. Además, puedes usar el system color mode, de modo que si un usuario tiene el modo oscuro configurado por defecto en su dispositivo, tu sitio lo detectará automáticamente.

Diseño responsive fácil

ChakraUI admite estilos responsive desde el primer momento. No tienes que añadir media queries manualmente, ChakraUI ofrece valores en objeto y en array para definir estilos responsive. Vale la pena señalar que usa “@media(min-width)” para garantizar un enfoque mobile‑first.

Puedes definir tus propios breakpoints en la configuración del tema o usar los predeterminados. 

Veamos cómo se implementa la capacidad responsive en un componente básico `<Text>`: 

```jsx <Text fontSize={["24px", null, "56px"]} textAlign={["center", null, "left"]}> Responsive Text </Text>

Usando el snippet anterior “<Text>” tendrá “24px” y estará centrado en todos los breakpoints. 

En lugar de un solo valor, pasamos un array de valores. Chakra tomará “24px” de la prop “fontSize” y “center” de “textAlign” y los usará para tamaños de pantalla entre 0 y 30em (estos son los valores por defecto en la configuración del tema). Luego fíjate en el “null” que pasamos:  no queremos cambiar los estilos en el rango de 30em a 48em (de nuevo, breakpoints por defecto), así que pasamos null para evitar generar CSS innecesario. En los últimos índices de los arrays asignamos “56px” y “left” para que nuestro texto tenga ese estilo en todas las pantallas mayores de 48em.

Personalmente, no soy muy fan de esta notación con arrays. Hace más difícil descubrir qué estilos se aplican en cada breakpoint. 

Por suerte, podemos usar la sintaxis de objeto: 

```jsx <Text fontSize={{ base: "24px", md: "56px" }} textAlign={{ base: "center", md: "left" }} > Responsive Text </Text>

La sintaxis se ve diferente, pero el comportamiento es el mismo.

Accesible

No podemos enfatizar lo suficiente la importancia de la accesibilidad. Un porcentaje considerable de personas experimenta algún tipo de discapacidad, por lo que es crucial crear UIs accesibles. Normalmente tenemos que implementar varias pautas WCAG, pero por suerte cosas como los contornos adecuados y la navegación por teclado vienen cubiertas por Chakra. Por supuesto, no es todo, y todavía debemos recordar aspectos como la estructura jerárquica de encabezados o los atributos alt para las imágenes.

BONUS: Últimamente, ChakraUI añadió soporte para idiomas RTL. A partir de ahora, es mucho más fácil crear componentes que cubran tanto idiomas RTL como LTR.

Conclusión

Como ves, ChakraUI demuestra ser modular y accesible. Además, es realmente pequeño (375 kB minified, 101 kB minified y gzipped, aunque debes recordar que, además de la librería core de Chakra, tienes que instalar Emotion). Por mi experiencia, ¡es una de las mejores bibliotecas de componentes para React!

Si quieres saber más sobre bibliotecas de componentes, o cuál es la mejor para tu proyecto, estaremos encantados de escucharte. Escríbenos a hello@start-up.house