/*
The React Context API uses a Provider and Consumer pattern to
share data throughout an application. The provider role
is played by a React componentthat makes data available to
its descendant components.
When one of those descendants accesses the shared data,
it becomes a consumer.
To use the React Context API, we start by creating a React
context object, a named object created by the
React.createContext() function.
*/
const MyContext = React.createContext();
/*
Context objects include a .Provider property that is
a React component. It takes in a value prop to be stored
in the context.
*/
<MyContext.Provider value="Hello world!"> <ChildComponent />
</MyContext.Provider>
/*
That value — in this case, the string "Hello world!" — is
available to all its descendent components. Descendent
components — in this case, ChildComponent — can then retrieve
the context’s value with React’s useContext() hook.
*/
import { useContext } from 'react';
import { MyContext } from './MyContext.js'
const ChildComponent = () => { const value = useContext(MyContext); return <p>{value}</p>;
}
// Renders <p>Hello, world!</p>
/*
The useContext() hook accepts the context object as an
argument and returns the current value
of the context. Rejoice — prop drilling that value is
no longer needed!
Note: If a component attempts to use a context that
isn’t provided by one of its ancestors, useContext() will return null.
*/

DEFINITION::::::
Context provide a way to pass data through the component tree without
having to pass down manually at every level
HOW TO USE::::::
DECLARATION:::	const MyContext = React.createContext()
Creating a new Context for each unique piece of data that needs to be available
throughout your component data	const LocaleContext = React.createContext()
Properties of LocaleContext --------	LocaleContext.Provider LocaleContext.Consumer
What is a Provider	Allows us to "declare the data that we want available throughout our	component tree"
What is a Consumer	Allows "any component in the tree that needs that data to be able to subscibe to it"
How to use Provider	<MyContext.Provider value={data}> <App /> </MyContext.Provider>

import React from "react";
// 1. Create context - storing values
export const CartContext = React.createContext();
// CartContext.Provider
// this is you create that context box
// Provider
export function CartContextProvider({ children }) { const [cartCount, setCartCount] = React.useState(0); const handleCartUpdate = (val) => { setCartCount(cartCount + val); }; const handleDec=(val)=>{ setCartCount(cartCount + val); } return ( <CartContext.Provider value={{ cartCount, handleCartUpdate,handleDec }}> {children} </CartContext.Provider> );
}
=====================navbar.jsx
import React from "react";
import { CartContext } from "../Context/CardContexr";
const Navbar = () => { const { cartCount } = React.useContext(CartContext); const{handleCartUpdate}= React.useContext(CartContext)
// const { theme } = React.useContext(ThemeContext); return <> <h1 >Cart Count : {cartCount}</h1> <button onClick={()=>{handleCartUpdate(1)}} >change</button> </>
};
export default Navbar;

import React, { useState } from 'react'
const GlobalStateContext = React.createContext({ })
export const GlobalStateProvider = ({ children }) => { const [config, setConfig] = useState({ projectInfo: '' }) const [projectFile, setProjectFile] = useState('./test.cpp') const [executionState, setExecutionState] = useState("NoProject") return ( <GlobalStateContext.Provider value={{ executionState, config, projectFile, setExecutionState, setConfig, setProjectFile, }} > {children} </GlobalStateContext.Provider> )
}
export default GlobalStateContext

// In App.js
<NoteState>	components where you want to use this context which you created
</NoteState>
// In NoteContext.js
import { createContext } from "react";
const NoteContext = createContext();
export default NoteContext;
// In NoteState.js or whatever name you want to give
import NoteContext from "./NoteContext";
const NoteState = (props)=>{ // you can also pass state here also or functions also const user = { name: "Gourav Khurana", age: 19, caast: "General" } return ( <NoteContext.Provider value={user}> {props.children} </NoteContext.Provider> )
}
export default NoteState;
This is all about Context API how to create it and add it to Components
Now how to use it in the Components :-
import React, { useContext } from 'react';
import NoteContext from "../contexts/notes/NoteContext";
const About = () => { const contextValue = useContext(NoteContext); return ( you can simply use here. )
}
export default About

import { createContext, useContext, useReducer } from "react";
const Actions = {	SET_ITEMS: "SET_ITEMS",
};
const reducer = (state, action) => {	if (action.type === Actions.SET_ITEMS) {	return { ...state, items: action.payload }; }	return state;
};
const initialState = {	items: []
};
const SimpleContext = createContext(initialState);
export const useSimpleContext = () => useContext(SimpleContext);
export const SimpleProvider = ({ children }) => {	const [state, dispatch] = useReducer(reducer, initialState);	function setItems(items) {	dispatch({ type: Actions.SET_ITEMS, payload: items });	}	return <SimpleContext.Provider value={{ state, setItems }}>{children}</SimpleContext.Provider>;
};

import React, { useContext } from "react";
import CountContext from "./context";
const Child = () => { const context = useContext(CountContext); const { countHandler } = context; return ( <div> <button onClick={countHandler}>Increment</button> </div> );
};
export default Child;

class App extends React.Component { render() { return <Toolbar theme="dark" />; }
}
function Toolbar(props) { // The Toolbar component must take an extra "theme" prop // and pass it to the ThemedButton. This can become painful // if every single button in the app needs to know the theme // because it would have to be passed through all components. return ( <div> <ThemedButton theme={props.theme} /> </div> );
}
class ThemedButton extends React.Component { render() { return <Button theme={this.props.theme} />; }
}