renderly-svelte

Conditional rendering components for Svelte.

Install

pnpm add renderly-svelte

Usage

<script lang="ts">
  import { Renderly, Unless, When } from "renderly-svelte";
  let user: { name: string } | null = { name: "Mario" };
  let ready = true;
  let isPro = false;
</script>

<Renderly when={user}>
  <p>Welcome {user?.name}</p>
  <p slot="fallback">Please sign in</p>
</Renderly>

<When when={ready}>
  <p>Ready</p>
  <p slot="fallback">Loading</p>
</When>

<Unless when={isPro}>
  <button>Upgrade</button>
  <p slot="fallback">Pro active</p>
</Unless>