The React Context API is a feature in React that allows you to share data (state, functions, or any other values) between components without explicitly passing props through every level of the component tree. This addresses the problem of "prop drilling," where props need to be passed down through multiple intermediate components that do not directly use the data themselves.

Method 1:

Step 1:

Whenever you want to make the make, create a folder named context in the src folder.

Name it UserContext.js .

import React from 'react'

const UserContext = React.createContext()

export default UserContext;

Step 2:

With in the same folder, make the file named UserContextProvider.jsx .

import React from "react";
import UserContext from "./UserContext";

const UserContextProvider = ({children}) => {
    const [user, setUser] = React.useState(null)
    return(
        <UserContext.Provider value={{user, setUser}}>
        {children}
        </UserContext.Provider>
    )
}

export default UserContextProvider

• Here, we define the user & setUser which is the state & it’s function. You can use them wherever you want, just pass it there through the UserContextProvider.

• You can even pass functions, variables like:

{{
    themeMode: "light",
    darkMode: () => {},
    lightMode: () => {}
}}

Step 3:

The UserContextProvider need to be wrapped in the App component(Parent component) like:

import './App.css'
import Login from './components/Login'
import Profile from './components/Profile'
import UserContextProvider from './context/UserContextProvider'

function App() {


  return (
    <UserContextProvider>
      <h1>React with Chai and share is important</h1>
      <Login />
      <Profile />
    </UserContextProvider>
  )
}

export default App

To ensure that the data can be used in there.

Step 4:

To use the API context, all you have to do is. Use UserContext to get the user & setUser wherever you want.

import {useContext} from 'react'
import UserContext from '../context/UserContext'

const {user, setUser} = useContext(UserContext)

setUser({username, password})

As I pass on the {username, password} in the setUser so that whenever you want to extract the value through user. You can directly do something like this:

import {useContext} from 'react'
import UserContext from '../context/UserContext'

const {user} = useContext(UserContext)

<div>Welcome {user.username}</div>

Method 2:

Step 1:

So, in previous method; We saw the UserContext & UserContextProvider are handled seperately but in there, they are in the same file. In the file contexts/theme.js

import { createContext, useContext } from "react";

export const ThemeContext = createContext({
    themeMode: "light",
    darkTheme: () => {},
    lightTheme: () => {},
})

export const ThemeProvider = ThemeContext.Provider

export default function useTheme(){
    return useContext(ThemeContext)
}

So, to minimize the import statement. What we did here is: We define ThemeContext, ThemeProvider & even the hook useTheme. So, that we can directly use the data thought the Context API.

Step 2:

The ThemeProvider need to be wrapped in the App component(Parent component) like:

import { useEffect, useState } from 'react'
import { ThemeProvider } from './contexts/theme'
import ThemeBtn from './components/ThemeBtn'
import Card from './components/Card'

function App() {
  const [themeMode, setThemeMode] = useState("light")

  const lightTheme = () => {
    setThemeMode("light")
  }

  const darkTheme = () => {
    setThemeMode("dark")
  }

  return (
    <ThemeProvider value={{themeMode, lightTheme, darkTheme}}>
      <div className="flex flex-wrap min-h-screen items-center">
          <div className="w-full">
              <div className="w-full max-w-sm mx-auto flex justify-end mb-4">
                  <ThemeBtn />
              </div>

              <div className="w-full max-w-sm mx-auto">
                  <Card />
              </div>
          </div>
      </div>
    </ThemeProvider>
  )
}

export default App

• Instead of ThemeProvider.provider, we directly used ThemeProvider as we equate both of them previously. *( export const ThemeProvider = ThemeContext.Provider )*

• So, we get the value in here & changed them as per the preferred way.

Step 3:

Now, using the hook useTheme() , you can directly access the variable and functions in any component you want. Like this:

import useTheme from '../contexts/theme';

const {themeMode, lightTheme, darkTheme} = useTheme()

---

Reference: (By Hitesh Chaudhary💖) Hitesh Choudhary

https://youtu.be/JQVBGtZMqgU?si=rqQK1g4VytQlqAZO