Leonardo Fabian

El paquete classnames es una biblioteca de utilidades para trabajar con clases CSS en aplicaciones JavaScript, especialmente en entornos como React. Esta biblioteca proporciona una forma conveniente de condicionar y combinar clases CSS de manera dinámica en función de ciertas condiciones o propiedades.

Algunas características clave de classnames son:

1. Condicionamiento de Clases: Permite agregar clases CSS a un elemento de manera condicional, basándose en el valor de una variable, estado o propiedad. Esto es útil para aplicar estilos específicos en diferentes situaciones, como cambios de estado o interacciones del usuario.
2. Combinación de Clases: Facilita la combinación de múltiples clases CSS en una sola cadena, lo que simplifica la aplicación de estilos complejos o la gestión de clases dinámicas.
3. Clases Dinámicas: Permite la creación de clases CSS dinámicas mediante la interpolación de valores variables dentro de las clases. Esto es útil para aplicar estilos basados en datos dinámicos o propiedades de componentes.
4. Integración con React: Se utiliza comúnmente en aplicaciones React para gestionar clases CSS de forma dinámica en componentes funcionales y de clase.

Instalación

Abrimos una consola en la ruta de nuestro projecto con React y ejecutamos el siguiente comando:

npm install classnames

Para este tutorial hemos utilizado las sigientes dependencias:

{
  // ...
  "dependencies": {
    "classnames": "^2.5.1",
    "next": "14.1.3",
    "react": "^18",
    "react-dom": "^18",
    "sass": "^1.72.0",
    "semantic-ui-css": "^2.5.0",
    "semantic-ui-react": "^2.1.5",
  },
  // ...
}

Ejemplo de uso en React con classnames:

Suponiendo que estamos trabajando con Nextjs y que tenemos un componente layout llamado RootLayout:

import styles from './RootLayout.module.scss';
import { Container } from 'semantic-ui-react';

export function RootLayout(props) {

    const {
        children, 
        isOpenSearch = false, 
        isContainer = false, 
        relative = false
    } = props;

    return (
        <>
            {/* TopBar */}

            <Container fluid>
                {isContainer ? <Container>{children}</Container> : children}
            </Container>

            {/* Footer */}
        </>
    )
}

Importamos classnames en nuestro layout:

import classNames from 'classnames';

Una vez importado, envolvemos el contenido donde queremos utilzarlo:

return (
    <>
       {/* TopBar */}

       <Container fluid>
            <div className={classNames}>
                 {isContainer ? <Container>{children}</Container> : children}
            </div>
       </Container>

       {/* Footer */}
    </>
)

En este caso le estamos pasando al <div> en la propiedad className (singular) nuestra función classNames (plural)

Como estamos trabajando con styles, vamos a probar condicionando nuestra clase relative

<Container fluid>
    <div className={classNames({ [styles.relative]: relative })}>
         {isContainer ? <Container>{children}</Container> : children}
    </div>
</Container>

si relative es verdadero, pasaremos nuestra clase.

Luego en los estilos, estructuramos nuestra clase relative:

@import '~/src/scss/index.scss';

.relative {
    padding-top: 100px;
}

En el ejemplo anterior, le estamos diciendo que nuestra etiqueta con la clase relative tendrá un padding-top de 100 pixeles.