DEV Community

Cover image for useContext() with Typescript

useContext() with Typescript

Amateur blogger on January 18, 2021

The below article will give you an overview with an example of how to use the useContext() hook and also update the globally set context value in c...
Collapse
 
jdgamble555 profile image
Jonathan Gamble

For me, I had to add an empty _value like:

export const DarkContext = createContext({ 
  darkMode: false,
  setDarkMode: (_value: boolean) => { }
});

export const useDarkContext = () => useContext(DarkContext);
Enter fullscreen mode Exit fullscreen mode
Collapse
 
typhon0130 profile image
Typhon Developer

Good working

Collapse
 
jedijetskyjodajedoindajaus profile image
jedidiah

It doesn't work for me, i don't have a getCopy, what this function does? could you please help me or get it touch with me!

Collapse
 
madv profile image
Amateur blogger

Hey! Thank you for your message and sorry for the inconvenience caused.
Basically, getCopy() method could be anything whose result you want to set globally. In my case, it is a simple method which gets content based on the logged in user type.
For eg:

const getCopy = (userType: string):string => 
{
   if (userType.toLowerCase() === 'admin')
   {
      return 'Hello Admin User!'
   }
   return 'Welcome user!'
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
enough7 profile image
Enough7 • Edited

You can use localstorage for this:

const USER_ID_KEY: string = "userId";
export let thisUser: IUser = {
    id: parseInt(localStorage.getItem(USER_ID_KEY) || '-1') 
};
Enter fullscreen mode Exit fullscreen mode
Collapse
 
madv profile image
Amateur blogger

Thank you for the alternative, however what if the user has disabled his localStorage? ;)

Thread Thread
 
enough7 profile image
Enough7

I did not know you can disable it

Collapse
 
ofergal profile image
Ofer Gal

How will you change this when the objects to set and get are much more complex?
I have something like :
export interface IDocumentInfo {
file: IFilePickerResult;
pages?: number;
instructions?: string;
existsOnsite?: boolean;
}
export interface IRequestInfo {
projectNumber: string;
documents: IDocumentInfo[];
}

and I want a global context for an IRequestInfo object.
Thank you

Collapse
 
ben profile image
Ben Halpern

Nice post

Collapse
 
madv profile image
Amateur blogger

Thanks a lot Ben :). Being my first technical post, I am glad you liked it :)

Collapse
 
raj__ profile image
Info Comment hidden by post author - thread only accessible via permalink
Raj

medium.com/@masterrajpatel/useglob...

tried to explain the same , see if it can help others

Collapse
 
koaladlt profile image
Manuel de la Torre

Thanks a lot! I started lo learn Typescript recently and you save me a lot of time. I would buy you a beer if I could. Cheers!

Collapse
 
madv profile image
Amateur blogger

haha, that is really sweet Manuel! Glad, I was able to help :)

Collapse
 
madakhamjonov profile image
m-adakhamjonov

Men o'zimga shuncha oldim.

Some comments have been hidden by the post's author - find out more