🧠 react-conditional-components

Komponen rendering kondisional yang sederhana dan mudah dibaca untuk React, terinspirasi dari pernyataan kontrol alur seperti if, else if, dan else.

🍑 Fitur Unggulan

• ✅ Penulisan logika kondisional yang deklaratif dan mudah dibaca
• 🔁 Mendukung struktur lengkap: <Then />, <ElseIf />, dan <Else /> Kontrol penuh terhadap alur logika dengan sintaks yang intuitif
• 🔁 Dukungan struktur switch-case dengan: <Switch />, <Case />, dan <Default /> Tulis logika percabangan kompleks dengan cara deklaratif:
• 💡 Siap digunakan dengan TypeScript
• 📦 Ringan, tanpa dependensi tambahan
• 🧩 Kompatibel dengan proyek apa pun Dapat digunakan di project React, Next.js, Vite, atau CRA.

🥑 Instalasi

Gunakan NPM:

npm i copong-utils

🍆Penggunaan IF

Menampilkan status login pengguna

export default function App() {
  const user = {
    name: "Badri",
    isLoggedIn: true,
    role: "admin", // bisa 'admin', 'user', atau lainnya
  };

  return (
    <div>
      <h1>Selamat datang di aplikasi</h1>

      <If condition={user.isLoggedIn}>
        <Then>
          <p>Halo, {user.name}!</p>

          <If condition={user.role === "admin"}>
            <Then>
              <p>Kamu adalah admin.</p>
            </Then>
            <ElseIf condition={user.role === "user"}>
              <p>Kamu adalah pengguna biasa.</p>
            </ElseIf>
            <Else>
              <p>Peranmu tidak diketahui.</p>
            </Else>
          </If>
        </Then>

        <Else>
          <p>Silakan login dulu ya!</p>
        </Else>
      </If>
    </div>
  );
}

Kasus Tema Website (Mode Gelap/Terang)

function ThemeSwitcher({ isDarkMode }: { isDarkMode: boolean }) {
  return (
    <If condition={isDarkMode}>
      <Then>
        <p>🌙 Dark Mode Aktif</p>
      </Then>
      <Else>
        <p>🌞 Light Mode Aktif</p>
      </Else>
    </If>
  );
}

🍒 Penggunaan switch

import { Switch, Case, Default } from "./Switch";

export default function App() {
  const status = "timeout";

  return (
    <Switch>
      <Case condition={status === "idle"}>🚦 Idle</Case>
      <Case condition={status === "loading"}>⏳ Loading...</Case>
      <Case condition={status === "success"}>✅ Success!</Case>
      <Case condition={status === "error"}>❌ Error occurred</Case>
      <Case condition={status === "timeout"}>⌛ Timeout</Case>
      <Default>🔍 Unknown status</Default>
    </Switch>
  );
}

Mapping

  const cases = [
    {
      condition: paymentStatus === "paid" && userRole === "member",
      content: <div>✅ Terima kasih! Pembayaran Anda sudah diterima.</div>,
    },
    {
      condition: paymentStatus === "pending" && userRole !== "guest",
      content: <div>⌛ Pembayaran Anda sedang dalam proses verifikasi.</div>,
    },
    {
      condition: paymentStatus === "unpaid" && isExpired,
      content: <div>❌ Masa pembayaran telah berakhir. Silakan hubungi admin.</div>,
    },
    {
      condition: paymentStatus === "unpaid" && !isExpired && userRole === "guest",
      content: <div>🔐 Silakan login untuk melanjutkan ke pembayaran.</div>,
    },
  ];

   return (
    <div className="p-4 font-mono text-sm">
      <h1 className="font-bold text-lg mb-3">Status: {paymentStatus}</h1>

      <Switch>
        {cases.map(({ condition, content }, i) => (
          <Case key={i} condition={condition}>
            {content}
          </Case>
        ))}

        <Default>
          <div>⚠️ Status tidak dikenali. Silakan hubungi CS.</div>
        </Default>
      </Switch>
    </div>
  );

SOK DI COBA

Tech Stack

Client: React, Redux, TailwindCSS

Server: Node, Express