Chousy NPM | npm.io

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

Usa la clave default para manejar casos donde ninguna condición sea verdadera.
Las claves de las condiciones deben ser evaluables (booleanos o expresiones) y convertidas a cadenas para usarlas como claves.

Puedes usar funciones como valores para el renderizado diferido:

const MyComponent = () => {
  const fetchData = () => <DataComponent data={loadData()} />;

  return chousy({
    [dataAvailable]: <DataComponent />,
    default: fetchData,
  });
};