Using React Context API with TypeScript can make managing state across components a breeze! Check out this code snippet to see how it's done 👀 #React #TypeScript #WebDevelopment

react-context-api.ts

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

// define the shape of your context value
interface AppContextValue {
  count: number;
  incrementCount: () => void;
}

// create the context with initial values
const AppContext = createContext<AppContextValue>({
  count: 0,
  incrementCount: () => {},
});

// define a component that provides the context value
const AppProvider: React.FC = ({ children }) => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount((prevCount) => prevCount + 1);
  };

  const value: AppContextValue = {
    count,
    incrementCount,
  };

  return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
};

// define a custom hook to consume the context value
const useAppContext = () => useContext(AppContext);

// use the context value in a component
const ExampleComponent: React.FC = () => {
  const { count, incrementCount } = useAppContext();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
};

// use the AppProvider to wrap your app and provide the context value
const App: React.FC = () => {
  return (
    <AppProvider>
      <ExampleComponent />
    </AppProvider>
  );
};

export default App;