How do I use React Context with TypeScript?

How do I use React Context with TypeScript?

To use React Context with TypeScript, you first need to create a context using React.createContext. You can define the type for your context value.

Can you show me a code example?

Sure! Here's a simple example:

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

type MyContextType = { name: string; age: number };
const MyContext = createContext<MyContextType | undefined>(undefined);

const MyProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
    const value = { name: 'John', age: 30 };
    return <MyContext.Provider value={value}>{children}</MyContext.Provider>;
};

const MyComponent = () => {
    const context = useContext(MyContext);
    if (!context) throw new Error('MyComponent must be used within a MyProvider');
    return <div>{context.name} is {context.age} years old.</div>;
};

What are the benefits of using Context API with TypeScript?

Using Context API with TypeScript provides type safety, making it easier to manage state and props across your application. It helps catch errors at compile time and improves code readability.