How can I use the Context API with TypeScript?

How can I use the Context API with TypeScript?

You can use the Context API in TypeScript by defining your context type and creating a context provider. Would you like a code example?

Yes, please provide a code example.

Sure! Here's a simple example:

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

type MyContextType = { value: string; setValue: (value: string) => void; };

const MyContext = createContext<MyContextType | undefined>(undefined);

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

const useMyContext = () => {
    const context = useContext(MyContext);
    if (!context) {
        throw new Error('useMyContext must be used within a MyProvider');
    }
    return context;
};

This sets up a context with a value and a setter function.

How do I consume this context in a component?

You can consume the context in a component like this:

const MyComponent: React.FC = () => {
    const { value, setValue } = useMyContext();
    return <div>{value}</div>;
};

Just make sure your component is wrapped in the MyProvider.