Declaring props with export let in Svelte

Introduction

Props let you send information into a Svelte component from outside. Using export let is how you declare these inputs simply.

You want to pass a user's name into a greeting component.

You need to customize a button's label from its parent component.

You want to reuse a card component with different content each time.

You want to control a component's color or style from outside.

You want to send data from a page to a nested component.

Syntax

Svelte

export let propName = defaultValue;

You use export let inside the <script> tag.

You can give a default value, so the prop is optional.

Examples

Declare a prop named name without a default value.

Svelte

<script>
  export let name;
</script>

Declare a prop count with a default value of 0.

Svelte

<script>
  export let count = 0;
</script>

Declare a prop color with default 'blue'.

Svelte

<script>
  export let color = 'blue';
</script>

Sample Program

This component shows a greeting message. You can pass greeting and name from outside. If you don't, it uses default values.

Svelte

<script>
  export let greeting = 'Hello';
  export let name = 'Friend';
</script>

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

Important Notes

If you don't pass a prop, the default value is used if set.

Props are reactive, so if the parent changes them, the component updates.

Always declare props with export let to make them accessible from outside.

Summary

Use export let inside <script> to declare props.

Props let you customize components from outside.

You can set default values to make props optional.