The Context API in React

The Context API in React is a way to manage a state that needs to be accessible by multiple components without having to pass props through each level of the component tree. It’s particularly useful for sharing data that is considered global or shared across different parts of your application.

Here’s an example to illustrate how Context API works

Step1: Create the context:

First, create a context: Use createContext() to create a new context. This will serve as a container to hold the shared data.

import React from "react";

// Create the context
const UserContext = React.createContext();
export default UserContext

OR

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

// Create the context
const ThemeContext = createContext();

Step 2: Set up a Provider

1. Create a Provider component: This will wrap the components that need access to the context.
2. Define state (if needed): Use useState to manage the state that you want to share across components.
3. Provide the context value: Use the Provider component created by the context and pass the value that will be accessible to consuming components.

Step 3: Create Custom Hooks (Optional but Recommended)

1. Create custom hooks: These hooks will allow components to consume the context easily.
2. Use useContext: Inside these custom hooks, use the useContext hook provided by React to access the context

import React, { useContext } from "react";
import UserContext from "./UserContext";

export const useUser = () => {
    const user = useContext(UserContext);
    return user;
}

const UserContextProvider = ({children}) =>{
        
        const name ="This is example of Context Api"
        return (
            <UserContext.Provider value={name}>
                {children}
            </UserContext.Provider>
        )
}

export default UserContextProvider

Step 4: Wrap the App with the Provider

Wrap the root component: Wrap your root component (often App) with the UserContextProvider to make the context available throughout your app.

import "./App.css";
import { Outlet } from "react-router-dom";
import Header from "./components/Common/Header/Header";
import Footer from "./components/Common/Footer/Footer";
import Home from "./components/Home";
import Test from "./components/Test";

import UserContextProvider from "./context/UserContextProvider";

function App() {
  return (
    <UserContextProvider>
      <div className="App">
        <Header />
          <Home />
          <Test />
        <Footer />
       </div>
    </UserContextProvider>

  );
}

export default App;

Step 5: Use the Context in Components

1. Wrap components with Provider: Wrap the components that need access to the context with the UserContextProvider.
2. Consume the context: Use the custom hooks created to access the context values within these components.

Example -1

import React, {useContext} from "react";
import UserContext from "../../context/UserContext";

const Home = () => {
  const value = useContext(UserContext);
  return (
    <div className="container">
      <h1>{value}</h1>
    </div>
  );
};
export default Home;

Example -2

import React, {useContext} from "react";
import UserContext from "../../context/UserContext";

const Test = () => {
  const value = useContext(UserContext);
  return (
    <div className="container">
      <h1>{value}</h1>
    </div>
  );
};
export default Test;

This structure ensures that components wrapped within the ThemeProvider have access to the data provided by the context without having to pass props through each level of the component tree.

Thank You !!!