Svelte - Context API

Quiz

The Context API in Svelte allows components to communicate directly without passing data through props or sending many events. This provides two functions setContext for setting context and getContex for getting context useful for managing state and functions in a more organized way, especially in complex applications.

What is setContext?

In Svelte, setContext is a function used to share data or functions from a parent component to its child components without the need to pass props through every level of the component tree.

How to use setContext?

The setContext function in svelte takes two parameters: key and value. To use setContext function in svelte you can follow the steps mentioned below:

Import setContext: Firstly, have to import setContext from the Svelte module in your parent component.

<script>
   import { setContext } from 'svelte';
</script>

Define the Value to Share: Then you have to create the value that you want to share with child components. For example:

<script>
   import { setContext } from 'svelte';

   const userDetails = { username: 'abc@example.com', isLoggedIn: true };
   setContext('user-details', userDetails);
</script>

Set the Context: Now, use setContext to link a value to a unique key. Child components will use this key to access the shared value.

setContext('user-details', userDetails);

Accessing Context in Child Components: In any child component that needs to access the shared context, import getContext and use the same key to get the value.

<script>
  import { getContext } from 'svelte';

  const userDetails = getContext('user-details');
</script>

Now, you can use the retrieved value in your child component.

What is getContext?

In Svelte, getContext is a function that allows a child component to access data or functions that have been provided by a parent component using setContext.

How to use getContext?

To use the getContext function in Svelte, follow these steps to access data or functions:

Import getContext: Firstly, have to import getContext from the from the Svelte module in your child component.

<script>
   import { getContext } from 'svelte';
</script>

Retrieve the Context Value: Use getContext to get the value linked to a specific key that the parent component set with setContext. The key you use must be exactly the same as the one in the parent. Fo example:

<script>
   import { getContext } from 'svelte';

   const userDetails = getContext('user-details'); // Replace 'user-details' with your key
</script>

You can now use the retrieved value within your child component.

Example

The following example simply demonstrates the use of svelte Context API to share data between a parent component and its child components.

<!--App.svelte-->
<script>
    import { setContext } from 'svelte';
    import Child from './Child.svelte';

    // Create a unique key for the context
    const key = 'sharedData';
    const value = { message: 'Hello from Parent!' };

    // Set the context with the key and value
    setContext(key, value);
</script>

<h1>Parent Component</h1>
<Child />

<!--Child.svelte-->
<script>
    import { getContext } from 'svelte';

    // Use the same key to get the context value
    const key = 'sharedData';
    const contextValue = getContext(key);
</script>

<h2>Child Component</h2>
<p>{contextValue.message}</p>

Output

Print Page