Svelte - Reusing Content

---

---

In Svelte, snippets and render tags are useful tools for making reusable components in your application. This chapter will explain how to bundle HTML and Svelte code into snippets, which helps keep your code clean and easy to manage.

What are Snippets in Svelte?

Snippets are pieces or blocks of code that you can reuse within a Svelte component. They help you combine HTML and logic, making it easier to handle content that you use repeatedly.

Syntax

To declare a snippet in Svelte, you use the {#snippet ...} directive in the following structure.

{#snippet snippetName()}
<!-- Snippet Content -->
{/snippet}

Declaring a Snippet with Parameters

You can add parameters to the snippet you made with the {#snippet ...} directive. Just put the parameters you want to use inside parentheses. Heres what it looks like:

{#snippet snippetName(param1, param2, ...)}
<!-- Snippet Content -->
{/snippet}

What are render tags?

Render tags allow you to show content that can change based on reactive variables or conditions. This makes the user experience more engaging and interactive.

Rendering the Snippet

To render the snippet you just created, use the {@render ...} directive like this:

{@render mySnippet()}

Rendering Snippets with Parameters

When snippets take parameters, you can provide the arguments directly inside the render tag like this:

{@render mySnippet(param1, param2)}

Passing snippets to components

To pass snippets to a component in Svelte, follow the steps mentioned below:

• Define Your Snippet: The very first thing you have to do is create a snippet using the {#snippet...} syntax. This snippet can contain any reusable HTML or Svelte code.
• Create the Component: Create a component that will accept the snippet as a prop. Use $props() to get the snippet inside the component.
• Render the snippet: Then you can render the snippet withing child component using {@render ...}.
• Pass the Snippet as a Prop: When using the component, pass the snippet as a prop just like you would with any other variable.
Example

<script>
 // Define your snippet here
 {#snippet mySnippet(param)}
 <div>
    <h2>{param.title}</h2>
    <p>{param.description}</p>
 </div>
 {/snippet}
</script>

<ChildComponent snippetName={mySnippet} />

Implicit Snippet Props

When you create snippets inside a component, you can use them as props for that component without having to declare them separately. These are implicit snippet props. This makes it simpler to manage and use snippets.

Key concepts

The below mentioned are some key concept related to implicit snippet props:

• Children Snippet: Any content inside a component that is not part of a declared snippet is treated as a special children snippet. This allows you render dynamic content without needing extra declarations.
• Renaming Props: When using implicit snippet props, you can rename the header prop to "children." This makes it easier to manage and display content within the component.
• Rendering Snippets: You can render these snippets within the component using the {@render ...} syntax, enhancing flexibility and reusability.

Example

This example shows you how to make a basic reusable component (or snippet) in Svelte and how to use it in your main application.

<!--Greeting.svelte-->
<script>
    export let name = 'World';
</script>

<h1>Hello, {name}!</h1>

<!--App.svelte-->
<script>
    import Greeting from './Greeting.svelte';
</script>

<main>
    <h1>Welcome to Tutorialspoint!</h1>
    <Greeting name="Riya" />
    <Greeting name="Priya" />
    <Greeting />
</main>

Output