React TypeScript Tutorial - 14 - useContext Hook

welcome back everyone in this video let's take a look at working with typescript and react context since we are discussing react hooks use context is what we will use to consume the context value also a friendly reminder that this video is not about the context api itself but rather typing the context api let's begin i have created a new folder in the components folder called context within this folder i have created a few files which we need for our example now what is that example well we are going to consider using react context with a theme providing themes to your components is a very common use case of the context api and we will see how to do it with typescript let's begin by going through the different files first we have theme.ts which contains a very simple theme for our application it has a primary and a secondary palette we then have themecontext.tsx file which is empty and needs our time and we also have a box dot tsx file which contains a very simple component that renders theme context in the browser what we have to do is use the theme value as a context and set the styles for this div tag let's see how to do it with react and typescript step 1 we create a new context so in theme context.tsx at the top import create context from react and then const theme context is equal to create context and the create context function accepts an initial value which is going to be the theme object in our example so theme and make sure to import it at the top next for step 2 we create the theme context provider let's begin with its prop type type theme context provider props will contain one prop which is children of type react dot react node next we define the provider component itself so export const theme context provider is equal to an arrow function when the parentheses from props we restructure children and the props type is what we have defined above theme context provider props for the jsx we return theme context dot provider which renders the children props we do get a red squiggly line as we are missing the value prop so let's add value is equal to theme now that we have a context provider for step 3 we wrap the box component with the provider so in app.tsx at the top import both the components import theme context provider from components slash context slash theme context and also import the box component from context slash box in the jsx invoke theme context provider with the box component as the children props now that we are providing the context value for our fourth and final step let's consume it in box.tsx first we make the necessary imports import use context from react and import theme context from theme context then in the jsx const theme is equal to use context and we pass in theme context and we do have a red squiggly line because we haven't exported theme context so let's export it and back in box.tsx we can now add the style props so on the div tag style is equal to an object and we can set background color to theme dot and you can see the auto suggestion or autocomplete in action primary dot main we can also set color to theme dot primary dot text the colors refer to these hex values from our theme object well let me now tell you this completes our example usage of react context with typescript and we got it done without having to write any context specific typescript code like i mentioned before typescript with type inference will try its best to do all the work for you whenever possible but let's make sure everything works as expected for the theme provider value if i pass in a string vishwas you can see it throws an error type string is not assignable to type which is the type of the theme object and in box dot tsx if you try to access a value not present in the theme object for example theme.success.main you can see we once again have an error property success does not exist on type which is the type of the theme object so typescript with react context is working as expected now you might be thinking is it really this easy well it is if you know the context value when you're creating the context which is the case we have here with theme context however you will come across a scenario where the context value is not known initially and is set at a later point in time let's learn how to deal with that in the next video

Channel: Codevolution

Views: 1,062

Rating: 5 out of 5

Keywords: Codevolution, React, TypeScript, React TypeScript, React TypeScript Tutorial, React TypeScript Tutorial for Beginners, React with TypeScript, React with TypeScript Tutorial, useContext Hook, useContext Hook with React and TypeScript, React TypeScript Tutorial on useContext Hook

Id: rbtTb9hLYS8

Length: 7min 20sec (440 seconds)

Published: Tue Sep 14 2021