Photo by russn_fckr on Unsplash

Asignación de clases y estilos de CSS dinámicamente

Daremos un paseo por algunas formas que permiten agregar o quitar clases y estilos de CSS dinámicamente utilizando React.js.

Usando operadores ternarios

La estructura de los operadores ternarios se ve así:

Ternary operator example

Tenemos una condición y los valores que retornará si se cumple: de ser verdadera, será is_true, y si es falsa, is_false .

Entonces asignar clases usando operadores ternarios quedaría así:

Assigning CSS classes and styles dynamically with Ternary Operators

Usando el patrón compact(arrayOfClassNames).join(‘ ‘)

Para usarlo necesitaremos instalar el módulo npm lodash. Luego importar lodash/compact.

Lo que hace compact es, como su nombre lo indica, compactar el contenido de nuestro array, evitando los false | null | undefined | '' | 0 , para muestra un botón:

Compact example

¿Notan que al costado del número cuatro también pasé un string aparentemente vacío? En realidad no lo está, ya que contiene el caracter ascii 32.

Finalmente usamos .join(' ') para unir nuestro array en una sola cadena string, separados por un espacio. Siguiendo el ejemplo anterior queda así:

Join example

Ahora que ya tenemos claro como trabajan junto lodash/compactyjoin(' ') para salvarnos el día, reforcemos lo aprendido con un ejemplo de asignación de clases:

Assigning CSS classes and styles dynamically with Compact and Join

Usando classnames

classNames es otro módulo npm muy útil para unir condicionalmente clases CSS. Para tenerlo corriendo en tu proyecto revisa su guía de instalación. Luego de tenerlo instalado tenemos que importalo en nuestro archivo. Funciona muy parecido al patróncompact(arrayOfClassNames).join(' ') que mencionamos antes.

Usar classNames en nuestro proyecto agregará mucho valor semántico. Veamos un par de ejemplos para probar este punto.

classNames example

En la línea 2 vemos que es muy intuitivo saber qué clase no se agregará, porque tenemos el class key foo-bar que contiene un valor false . Sucede lo mismo si contiene los valores null | undefined | false | '' | 0 .

Ahora siguiendo nuestro ejemplo de asignación de clases, nos quedaría así:

Assigning CSS classes and styles dynamically with Class Names

Repasamos tres formas para agregar o quitar clases y estilos CSS dinámicamente. Cuéntanos si conoces alguna otra forma/método para hacerlo. Como siempre, estaremos felices de leer otras sugerencias.