Svelte • Legacy APIs

$$props and $$restProps

In runes mode, getting an object containing all the props that were passed in is easy, using the $props rune.

In legacy mode, we use $$props and $$restProps:

$$props contains all the props that were passed in, including ones that are not individually declared with the export keyword
$$restProps contains all the props that were passed in except the ones that were individually declared

For example, a <Button> component might need to pass along all its props to its own <button> element, except the variant prop:

<script lang="ts">
	export let let variant: anyvariant;
</script>

<button {...let $$restProps: SvelteRestProps$$restProps} class="variant-{let variant: anyvariant} {let $$props: SvelteAllProps$$let $$props: SvelteAllPropsprops.SvelteAllProps[string]: anyclass ?? ''}">
	click me
</button>

<style>
	.variant-danger {
		background: red;
	}
</style>

<script>
	export let let variant: anyvariant;
</script>

<button {...let $$restProps: SvelteRestProps$$restProps} class="variant-{let variant: anyvariant} {let $$props: SvelteAllProps$$let $$props: SvelteAllPropsprops.SvelteAllProps[string]: anyclass ?? ''}">
	click me
</button>

<style>
	.variant-danger {
		background: red;
	}
</style>

In Svelte 3/4 using $$props and $$restProps creates a modest performance penalty, so they should only be used when needed.