> For the complete documentation index, see [llms.txt](https://132oq-szjxckld--diwejk1k2j-1123n.gitbook.io/documentation-studio-shento/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://132oq-szjxckld--diwejk1k2j-1123n.gitbook.io/documentation-studio-shento/getting-started-with-sveltekit/component-events.md).

# Component Events

### Introduction

Svelte 5 introduces a new, simpler way to handle component events. This guide will walk you through the basics of this new approach, making it easy for beginners to understand and implement.

### Basic Callback Props

Let's start with a simple example of how to use callback props in Svelte 5.

{% tabs %}
{% tab title="src/components/Counter.svelte" %}

```html
<script>
  let { onIncrement } = $props();
  let count = $state(0);

  function increment() {
    count++;
    onIncrement(count);
  }
</script>

<button onclick={increment}>Increment: {count}</button>
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}

* `$props()` is a Svelte 5-specific feature that declares props for the component.
* `onIncrement` is a prop name we've chosen, but you can use any valid JavaScript identifier.
* `on:click` is Svelte-specific syntax for adding event listeners.
  {% endhint %}

Now, let's see how to use this component in a parent component:

{% tabs %}
{% tab title="src/App.svelte" %}

```html
<script>
  import Counter from './components/Counter.svelte';

  function handleIncrement(newCount) {
    console.log('New count:', newCount);
  }
</script>

<Counter onIncrement={handleIncrement} />
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}

* `import` is standard JavaScript syntax for importing modules.
* `onIncrement={handleIncrement}` is passing a function as a prop, which is standard JavaScript/JSX syntax.
  {% endhint %}

Let's see how this would appear in the browser:

{% tabs %}
{% tab title="localhost:3000" %}
\[Button] Increment: 0
{% endtab %}
{% endtabs %}

When you click the button, the count will increase, and you'll see log messages in the console.

### Conclusion

This guide covers the bare essentials of handling component events in Svelte 5. The new approach using callback props simplifies event handling and makes your code more intuitive.

{% hint style="warning" %}
Remember, while `createEventDispatcher` from previous Svelte versions still works in Svelte 5, it's recommended to use these new methods for future-proofing your code.
{% endhint %}