React TypeScript Tutorial – 14 – useContext Hook
Video Title: 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
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
Use coupon code CodevolutionYoutube for 100% off lifetime discount to your subscription at https://www.taskade.com/billing
Dear sir, will you please elaborate how to pass useref from context in react ts
I am new to react and earlier you mention in the video on props (Styled components), we can pass the style as a prop. Couldn't we have passed the theme as a prop?
why cant you just use same theme object and directly apply it to the box style omitting useContext completely idk
great tutorial thanks a lot ❤
ThemeContext got type 'any' is not it? How to give proper type here?
Great series for beginners.
Just remember if typescript is happy then you're happy 😊
Easy to understand thanks
I spend entire day to figure out this and at the end of the day I found our tutorial thank you
Im trying to pass down as a value a setState function and also the value it self and I cant get around it. Any tip?
Oh man. I've been trying to figure this out for a while, and it finally clicked. Thank you!
Not bad, but you sound less human than Zuckerburg
nice typescript tutorial without using typescript
Tks man, i finally learned useContext, really great video, keep going!
How do I go about passing other prop values into the ThemeContextProvider component so they do not have the same type as the children prop of the ThemeContextProvider?
thx for your job
But l have came across with high order component, can you please make video about this ? thx
it would be great
Haha I’m thinking about changing my career 😀
why did you use 'theme' as an argument for createContext?
why do you use TS if you don't take any advantage of it?
how to solve many re renders in Context API?