How can I use the Context API with TypeScript in my React app?

How can I use the Context API with TypeScript in my React app?

To use the Context API 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';

interface 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<string>('');
  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.

What if I want to use multiple contexts?

You can nest providers for multiple contexts. Just create additional context and provider components, and wrap them around your components as needed.