masum184e/react_context_hook_basic_template

It serves as a basic template for implementing state management using React Context API in React applications. It provides a structured starting point for managing global state without the need for external libraries like Redux, offering a simpler alternative for smaller-scale applications.

React Context Hook Basic Template

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

Preview

Live View

Requirements

Install Node On Your Device

How to Run

git clone https://github.com/masum184e/react_context_hook_basic_template.git
cd react_context_hook_basic_template
npm install
npm run dev

Explaination

We bassically need 3 different component:

1. wrapper:

   It allows you to integrate the context provider Provider into your application more seamlessly. Instead of directly importing and using Provider everywhere in your app, you can simply wrap your entire application or a specific subtree with Provider, which internally handles the context provider setup. This helps keep your code organized and reduces redundancy.

    import React from 'react'
    import ReactDOM from 'react-dom/client'
    import App from './App.jsx'
    import Provider from '../provider/Provider.jsx'
   
    ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        <Provider>
        <App />
        </Provider>
    </React.StrictMode>,
    )

2. provider:

   The provider component in React is a way to pass data down through the component tree. It allows components to access this data using the context API, regardless of how deep they are nested in the component hierarchy. It essentially creates a scope where the provided data (in this case, count and setCount) is available to all descendant components. This avoids the need to pass props down manually through each level of the component tree, making your code cleaner and more maintainable.

    import { createContext, useState } from "react";
   
    export const ImplementContext = createContext(null)
   
    const Provider = ({ children }) => {
        const [count, setCount] = useState(0);
        const [name, setName] = useState("");
   
        const contextValue = {
            count,
            setCount,
            name,
            setName
        }
   
        return (
            <ImplementContext.Provider value={contextValue}>{children}</ImplementContext.Provider>
        )
    }
   
    export default Provider

3. consumer:

   Consumer component demonstrates how to consume the context created by Provider using the custom hook useMyContext. You can easily access the context state and update functions provided by Provider. This separation of concerns allows you to keep your components clean and focused, while still having access to shared state managed by the context provider.

   import { useContext } from "react"
   import { ImplementContext } from "../provider/Provider"
   
   const Child = () => {
   const { setCount, setName } = useContext(ImplementContext)
   return (
       <>
       <div>
           <h5>I&apos;m from Child</h5>
       </div>
       <div style={{ display: "flex", gap: "10px" }}>
           <button
           aria-label="Increment value"
           onClick={() => setCount(prev => prev = prev + 1)}
           >
           Increment
           </button>
           <button
           aria-label="Decrement value"
           onClick={() => setCount(prev => prev = prev - 1)}
           >
           Decrement
           </button>
       </div>
       <div style={{ marginTop: "5px" }}>
           <input type="text" name="" id="" onChange={(event) => setName(event.target.value)} />
       </div>
       </>
   )
   }
   
   export default Child

   import { useContext } from "react"
   import SuperParent from "./SuperParent"
   import { ImplementContext } from "../provider/Provider"
   
   const App = () => {
   const { count, name } = useContext(ImplementContext)
   return (
       <>
       <h1 style={{ textAlign: "center" }}>Hello React Context</h1>
       <h2>I&apos;m from App, my name {name} & value {count}</h2>
       <SuperParent />
       </>
   )
   }
   
   export default App

Structure

├─ provider
│  ├─ Provider.jsx
│
├─ src
│  ├─ App.jsx
│  ├─ Child.jsx
│  ├─ Parent.jsx
│  ├─ SuperParent.jsx
│  └─ main.jsx
│
├─ .eslintrc.cjs
├─ .gitignore
├─ README.md
├─ index.html
├─ package-lock.json
├─ package.json
├─ preview.png
├─ vercel.json
└─ vite.config.js