How do I use useContext in React with TypeScript?

How do I use useContext in React with TypeScript?

To use useContext in React with TypeScript, first create a context using React.createContext(). You can then use the useContext hook to access the context value in your components.

Can you show me a code example?

Sure! Here's a simple example:

import React, { createContext, useContext, useState } from 'react';

const MyContext = createContext<{ value: string; setValue: (val: string) => void } | undefined>(undefined);

const MyProvider: React.FC = ({ children }) => {
    const [value, setValue] = useState('Hello, World!');
    return <MyContext.Provider value={{ value, setValue }}>{children}</MyContext.Provider>;
};

const MyComponent: React.FC = () => {
    const context = useContext(MyContext);
    if (!context) throw new Error('MyComponent must be used within a MyProvider');
    return <div>{context.value}</div>;
};

const App: React.FC = () => (
    <MyProvider>
        <MyComponent />
    </MyProvider>
);

This code creates a context and a provider, and then uses the context in a component.

What if I want to use multiple contexts?

You can nest multiple providers in your component tree. Each provider can manage its own context. Just ensure that the components consuming the context are wrapped in the appropriate provider.