DEV Community

Discussion on: svelte-monetization - A minimal and lightweight wrapper for the Web Monetization API 💸

Collapse
 
wobsoriano profile image
Robert • Edited

[POST UPDATED]

Before, svelte-monetization uses named props to render monetized content:

{#if isLoading}
  <slot name="loading" />
{:else if isMonetized}
  <slot name="monetized" />
{:else}
  <slot name="not-monetized" />
{/if}

Now, while exploring Svelte docs, I've learned that you can pass values back to the parent using props too! So I refactored it.

<slot {isLoading} {isMonetized} />

Now it's much cleaner and can be used like this.

<SvelteMonetization let:isMonetized let:isLoading>
  {#if isLoading}
    <div>Loading message here</div>
  {:else if isMonetized}
    <div>Monetized/premium content here</div>
  {:else}
    <div>Show ads here</div>
  {/if}
</SvelteMonetization>