0Pricing
Sveltejs Academy · Lesson

Higher-Order Components

Wrap components to add behavior or data without modifying the original.

HOCs Defined

A higher-order component wraps another component to add behavior or data.

In Svelte

You can write a wrapper component that imports a base and adds capabilities (logging, auth, theming).

<!-- WithAuth.svelte -->
{#if user}
  <slot />
{:else}
  <a href="/login">Login</a>
{/if}

All lessons in this course

  1. Render Props with Snippets
  2. Higher-Order Components
  3. The Builder Pattern for Headless UI
  4. Compound Components with Context
← Back to Sveltejs Academy