How to add Context API in React.js

Useful code snippets for adding Context api

Context API is the way to share values in components using global state. It’s very useful when calling API’s and storing the posts data in one central state and get the access to the components easily.

First in order to create the central storage, we need create Context page in the react app.

Create — src/context/NameContext.js (name of the Context Page).

import { createContext } from "react";
const BlogContext = createContext();

Next, Context has provider component which enables values to share among components

//src/context/BlogContext.js

import { createContext } from "react";
const BlogContext = createContext();

const BlogContextProvider = ({children}) => {
  
  const message = "Hello"
  const name = "John"
return (
<BlogContext.Provider value={{message, name}}>
{children}
</BlogContext.Provider>
)
}
export {BlogContext, BlogContextProvider}

Next, we need to wrap the Context Provider around the App component so that the data will be accessed inside the components

Go to — src/index.js

Import BlogContextProvider inside the page

import {BlogContextProvider } from './context/BlogContext';

Wrap <ContextProvider> around the App component

//src/components/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BlogContextProvider } from './context/BlogContext';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
     <BlogContextProvider>
         <App />
    </BlogContextProvider>
 </React.StrictMode>
);

now the context values are being accessed inside the components

Go to any components — E.g src/Components/Home.js

Import Context inside the page

import { BlogContext } from '../context/BlogContext'

Using useContext hook context values can be accessed inside

//src/components/Home.js
import { useContext } from 'react'
import { BlogContext } from '../context/BlogContext'
export default function Home(){
const {message, name} = useContext(BlogContext)
return(
<div>
  <p>{message}</p>
  <p>{name}</p>
</div>

functions also can be passed among the components with context

Example using Firebase, here context can be shared like this

//src/context/MediumContext.js
import React, { Component } from 'react'
import {createContext, useEffect, useState} from 'react'
import {collection, getDocs, setDoc, doc, query} from 'firebase/firestore'
import {db} from '.src/firebase'
const MediumContext = createContext()

const MediumProvider = ({children}) => {
  const [posts, setPosts] = useState([])
useEffect(() => {
const getUsers = async () => {
const querySnapshot = await getDocs(collection(db, "posts"));
    querySnapshot.docs.map(doc =>
setPosts(doc.data()))
}
   getUsers()
}, [])
return(
<MediumContext.Provider value={{posts}}>
  {children}
</MediumContext.Provider>
)
}
export {MediumContext, MediumProvider}

Hope you find this article useful, Thank you!