How to Avoid Prop Drilling in Svelte

You can avoid prop drilling in Svelte with the use of setContext and getContext. You can set a context in a parent component and reach it in any deeply nested child component in the following way:

<!-- Setting context in parent component -->
<script>
  import { setContext } from 'svelte';

  setContext(‘globalContext', { ... });
</script>

<!-- Getting the context in a child component -->
<script>
  import { getContext } from 'svelte';

  const context = getContext('globalContext');
</script>

Note that context is not reactive. If you need to have a reactive behavior, you should pass a store to the context.

Looking into Svelte 3Quickstart by creating a retro board in Svelte from scratchSvelte 3 promises a radical new approach to building user interfaces. Since it is a compiler, it works fundamentally different from other big frameworks...Learn More

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Resources:

• The setContext method in Svelte