Transcript from the "Context API" Lesson
[00:00:00]
>> At times, you'll have a group of components that need to work together in some way. For example, you might have a map component like this one here, that renders a map box GL map. And then inside that we might want to have these map marker components that affect the map in some way.
[00:00:20] What we don't wanna do, is have to store a reference to the map component, and then pass it down to the MapMarker components or vice versa. We want all of that coordination to happen within the components themselves. Because that makes our lives, as the users of these components much easier.
[00:00:36] And the way that we do that in Svelte is with something called the Context API. The Context API is a mechanism that allows components to talk to each other without data being passed around as props. And the context API comes in two halves, we have set context and get context.
[00:00:55] Set context is called on a parent component, and that makes the context available to every child component that is rendered within it. So in map.svelte here, what we need to do is set some context. We're gonna import set context from Svelte. I'm gonna import this key value from map box.
[00:01:25] That will become clear in a minute. And then we are going to set the context with that key. And just pass in an object with a get map method. Now that second argument to get context can be anything you like. It really doesn't matter. But typically what it will be is an object containing a variety of functions that the child components are gonna use to communicate with the parent component.
[00:02:03] So on the other side of the equation inside the MapMarker component, we're gonna need to get a reference to the Mapbox map. So we're gonna import get context from Svelte. Again, we're gonna import that key and then here, we're going to call get context and get a reference to that get map function.
[00:02:38] Then each map marker is going to have its own reference to map. So let's take a look at what's happening here. We have these map marker components inside the map. They've got a latitude and longitude and a label. And the way that they're being applied to the main map object here, is through the map box API.
[00:03:06] Once we have a reference to this map, we can create a pop up using the map box pop up API. Create a marker that uses that pop up and then we can add it to the map object that we had a reference to. You can imagine that if we didn't have the context API, you would have to have references to all of these things being passed around, and it would make our app.svelte a lot more cluttered.