DEV Community

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...

Read full post

Jonathan Gamble • Mar 6 '22

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

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

export const useDarkContext = () => useContext(DarkContext);

Typhon Developer • Jun 21 '23

Good working

jedidiah • Apr 5 '21

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!

Amateur blogger • Apr 5 '21

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!'
}

Enough7 • Aug 3 '21 • 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') 
};

Amateur blogger • Aug 3 '21

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

Enough7 • Aug 4 '21

I did not know you can disable it

Ofer Gal • Sep 29 '21

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