🔌 Context.Provider — Sharing Values with Components

Every Context has a Provider component. The Provider wraps your component tree and supplies data to all descendants. Any component inside the Provider can access that data.

🎯 How Provider Works

The Provider component accepts a `value` prop. Everything you put in `value` becomes available to all nested components:

import { createContext } from "react";

const ThemeContext = createContext("light");

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Header />
      <Content />
      <Footer />
    </ThemeContext.Provider>
  );
}

// All components inside Provider can access "dark"
function Header() {
  // Can access theme here
  return <h1>Header</h1>;
}

The Provider doesn't automatically pass anything down—it just makes the value available. Child components must explicitly request it using the `useContext()` hook.

💡 Provider Value Prop

The `value` prop can be any JavaScript value: a string, object, array, or function. Most often it's an object containing multiple related values:

import { createContext, useState } from "react";

const UserContext = createContext();

function App() {
  const [user, setUser] = useState({ name: "Alice", id: "123" });

  // Pass an object with multiple related values
  const value = {
    user,
    updateUser: (newName) => setUser({ ...user, name: newName }),
  };

  return (
    <UserContext.Provider value={value}>
      <UserProfile />
    </UserContext.Provider>
  );
}

<details>

<summary>📚 More Examples</summary>

// Example 1: Array value
const ListContext = createContext([]);

function App() {
  const items = ["apple", "banana", "orange"];
  return (
    <ListContext.Provider value={items}>
      <ShoppingList />
    </ListContext.Provider>
  );
}

// Example 2: Multiple values in object
const ConfigContext = createContext();

function App() {
  return (
    <ConfigContext.Provider
      value={{
        apiUrl: "https://api.example.com",
        timeout: 5000,
        retries: 3,
      }}
    >
      <ApiClient />
    </ConfigContext.Provider>
  );
}

</details>

🎨 Real-World Example: Theme Provider

A common pattern is wrapping your whole app with a Theme Provider at the top level:

import { createContext, useState } from "react";

const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [isDark, setIsDark] = useState(false);

  const toggleTheme = () => setIsDark(!isDark);

  const value = {
    isDark,
    toggleTheme,
    backgroundColor: isDark ? "#1a1a1a" : "#ffffff",
    textColor: isDark ? "#ffffff" : "#000000",
  };

  return (
    <ThemeContext.Provider value={value}>
      {children}
    </ThemeContext.Provider>
  );
}

function App() {
  return (
    <ThemeProvider>
      <Header />
      <MainContent />
      <Footer />
    </ThemeProvider>
  );
}

This pattern makes `ThemeContext` available throughout your entire app without needing to pass props.

📊 Provider Usage Patterns

🔑 Key Takeaways

• ✅ Provider component supplies data to nested components

• ✅ Use the `value` prop to pass data

• ✅ Any component inside Provider can access the value

• ✅ Put Providers high in your component tree for maximum reach

• ✅ The value can be any JavaScript value

• ✅ Multiple Providers can nest for different data regions

• ✅ Value updates cause components using Context to re-render

Ready to practice? Challenges | Next: useContext Hook