chousy 🧩

chousy es una pequeña y poderosa utilidad para React que permite renderizar componentes condicionalmente de manera elegante. Simplifica el manejo de condicionales complejos y mejora la legibilidad de tu código.

🚀 Instalación

Instala la librería usando npm o yarn:

npm install chousy
# o
yarn add chousy

📖 Uso Básico

Importa chousy en tu proyecto y pásale un objeto donde las claves sean condiciones (evaluables como expresiones booleanas) y los valores sean componentes React. chousy devolverá el primer componente cuya condición sea verdadera.

Ejemplo Básico:

import chousy from 'chousy';

const MyComponent = () => {
  const isLoading = false;
  const isAuthenticated = true;

  return chousy({
    [String(isLoading)]: <Loading />,
    [String(isAuthenticated)]: <Dashboard />,
    default: <Login />, // Este componente se usará si ninguna condición es verdadera
  });
};

🌟 Características

• ✅ Fácil de usar.
• ✅ Soporte para condiciones booleanas y expresiones evaluables.
• ✅ Componente predeterminado con la clave default.
• ✅ Soporta componentes como funciones para renderizado dinámico.

⚙️ API

chousy(conditions: object)

Parámetros:

• conditions (Object): Un objeto donde:
  • Las claves son condiciones evaluables (booleanas o expresiones).
  • Los valores son componentes React (pueden ser nodos o funciones que retornan un nodo).

Retorna:

• El primer componente correspondiente a una condición verdadera.
• Si ninguna condición es verdadera, devuelve el componente definido en default o null.

Ejemplo Avanzado:

import chousy from 'chousy';

const MyComponent = () => {
  const userRole = 'admin';

  return chousy({
    [String(userRole === 'admin')]: <AdminDashboard />,
    [String(userRole === 'user')]: <UserDashboard />,
    default: <GuestView />,
  });
};

En este ejemplo, userRole === 'admin' y userRole === 'user' son condiciones evaluadas que retornan true o false, y luego se convierten a cadenas ('true' y 'false'), lo que permite utilizar estas claves en el objeto de condiciones.

🛠️ Mejores Prácticas

1. Usa la clave default para manejar casos donde ninguna condición sea verdadera.

2. Las claves de las condiciones deben ser evaluables (booleanos o expresiones) y convertidas a cadenas para usarlas como claves.

3. Puedes usar funciones como valores para el renderizado diferido:

   const MyComponent = () => {
     const fetchData = () => <DataComponent data={loadData()} />;
   
     return chousy({
       [dataAvailable]: <DataComponent />,
       default: fetchData,
     });
   };

🧪 Pruebas

Asegúrate de instalar las dependencias para las pruebas:

npm install --dev jest

Ejecuta las pruebas:

npm test

🤝 Contribuciones

¡Las contribuciones son bienvenidas! Por favor, crea un issue o envía un pull request.

📄 Licencia

Este proyecto está licenciado bajo la Licencia MIT. Consulta el archivo LICENSE para más detalles.

¡Gracias por usar chousy! 🎉