How can I use context in TypeScript?

How can I use context in TypeScript?

In TypeScript, context can be managed using interfaces and types to define the shape of your data. Would you like an example?

Yes, please provide an example of using context.

Sure! You can create a context using React's createContext and define its type. Here's a simple example:

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

interface MyContextType {
  value: string;
  updateValue: (newValue: string) => void;
}

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

const MyProvider: React.FC = ({ children }) => {
  const [value, setValue] = React.useState('Hello');
  const updateValue = (newValue: string) => setValue(newValue);

  return (
    <MyContext.Provider value={{ value, updateValue }}>
      {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 function to update that value.

How do I consume this context in a component?

You can consume the context in any component that is a child of the provider. Here's how:

const MyComponent: React.FC = () => {
  const { value, updateValue } = useMyContext();

  return (
    <div>
      <p>{value}</p>
      <button onClick={() => updateValue('New Value')}>Update Value</button>
    </div>
  );
};