setContext in Svelte - Mini Project: Build & Apply

Using setContext in Svelte to Share Data

📖 Scenario: You are building a simple Svelte app where a parent component shares a message with its child component using setContext and getContext.

🎯 Goal: Create a parent component that uses setContext to provide a message string. Then create a child component that uses getContext to receive and display that message.

📋 What You'll Learn

Create a parent Svelte component with a message string

Use setContext in the parent to share the message

Create a child Svelte component

Use getContext in the child to access the message

Display the message inside the child component

💡 Why This Matters

🌍 Real World

Sharing data between components without passing props directly is common in apps with nested components, like theme settings or user info.

💼 Career

Understanding setContext and getContext is important for building scalable Svelte apps where components need to share data cleanly.

1

Create the parent component with a message

In a Svelte component file, create a message variable with the exact string 'Hello from parent!'.

Svelte

let message = ''
// Your code here

Hint

Use let message = 'Hello from parent!' to create the message variable.

2

Use setContext to share the message

Import setContext from 'svelte' and use setContext with the key 'msg' and the message variable to share it.

Svelte

let message = 'Hello from parent!'

// Your code here to import setContext and call setContext('msg', message)

Hint

Use import { setContext } from 'svelte' and then setContext('msg', message).

3

Create a child component that gets the message

In a new Svelte component file, import getContext from 'svelte'. Use getContext('msg') to get the message and store it in a variable called receivedMessage.

Svelte

import { getContext } from 'svelte'

// Your code here to get the message with getContext('msg')

Hint

Use let receivedMessage = getContext('msg') to get the message from context.

4

Display the received message in the child component

Add markup to the child component to display the receivedMessage variable inside a <p> tag.

Svelte

import { getContext } from 'svelte'

let receivedMessage = getContext('msg')

 -->

Hint

Use <p>{receivedMessage}</p> to show the message.