In this video, we use the generated React Context to make the model available to entire portions of your UI Component Hierarchy without needing to use prop drilling. We learn how to enable data-driven and generic components to use different instances of models using React best practices.

There’s a few different ways to get access to a KOS model inside of your React components.

We already saw using a higher component to bring that in.

We can also take a look at how we can use the generated hooks to get access to a model as well.

So let’s start by creating a couple of components that are going to show where this is going to be used.

So we’ll go back to our generator, and I’m just going to use this to create a couple of new components.

We’ll call it config details with context.

Generate that.

And we’ll also generate another one called config details with hooks.

So now we’ve got two new components in there that we want to be able to use, with hooks and with context.

So let’s start with using a context first.

The context really rolls up a lot of the concepts around the higher components and the hooks into a React context that allows us to use this model anywhere within a component hierarchy.

So we can instantiate it once, we guarantee that the lifecycle is being met and it’s available, and any child component within that context can have access to the model and any of the associated context data that you want to have.

So the way we would do that is, let’s go up to our dispenser view, and we’re going to use another artifact or component that was generated, and there is a config details provider.

Again, it doesn’t take any parameters, but then any context, any content that I provide inside of here, let’s say I have a config details with context component, it will immediately make that available as part of a React context.

So that model will now be available to this child component, which means I don’t need to do prop drilling.

I can have deeply nested components that are all relying on the same instance of models, depending on the context that are being used in.

This becomes evident when we look at actually using a dispenser.

We have, for example, multiple nozzles that we want to have all the components be the same, but it’s really just the context of which nozzle it’s operating in that changes.

So this is a pattern that you might use quite a bit within here, within your code.

So I have the provider, I have the component here.

The component itself isn’t really showing anything, so let’s just get it to quickly paint some content on the screen, which is now appearing down here.

So the component itself is wired in and it is working, but let’s say we wanted to make use of that context.

So it’s wrapped in a provider.

Here I can say, use config details context, and so this is going to go up to the React context and find the model that we want and find the first instance of that in a context and provide it to us.

So there’s a property here that’s returned in the context called model.

And from within here, we can see if it’s doing anything, if it’s available here.

So here I have my model ID, and you can see down here it’s being used.

So now, again, I haven’t had to do prop drilling, I haven’t had to pass this model around with me as I use it through a larger hierarchy, I can just use the context and it’ll find the first one that’s available in the context hierarchy.