https://github.com/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.
https://github.com/masum184e/react_context_hook_basic_template
context global-state-management react react-context react-context-hooks state-mangement usecontext usecontext-hook
Last synced: 3 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/masum184e/react_context_hook_basic_template
- Owner: masum184e
- Created: 2024-02-21T04:16:12.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-04T10:28:35.000Z (about 1 year ago)
- Last Synced: 2025-02-06T07:11:16.860Z (5 months ago)
- Topics: context, global-state-management, react, react-context, react-context-hooks, state-mangement, usecontext, usecontext-hook
- Language: JavaScript
- Homepage: https://react-context-hook-basic-template.vercel.app
- Size: 85.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## React Context Hook Basic Template
Context hook 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](https://nodejs.org/)
## 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.
```jsx
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(
,
)
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.
```jsx
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 (
{children}
)
}
export default Provider
3. **consumer:**
Consumer component demonstrates how to consume the context created by `Provider` using the custom hook `useContext`. 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.
```jsx
import { useContext } from "react"
import { ImplementContext } from "../provider/Provider"
const Child = () => {
const { setCount, setName } = useContext(ImplementContext)
return (
<>
I'm from Child
setCount(prev => prev = prev + 1)}
>
Increment
setCount(prev => prev = prev - 1)}
>
Decrement
setName(event.target.value)} />
>
)
}
export default Child
```
```jsx
import { useContext } from "react"
import SuperParent from "./SuperParent"
import { ImplementContext } from "../provider/Provider"
const App = () => {
const { count, name } = useContext(ImplementContext)
return (
<>
Hello React Context
I'm from App, my name {name} & value {count}
>
)
}
export default App
```
## Features
__Update Counter:__ It allows the user to increase/decrease the counter value by 1 as well as increase the counter value by a specific amount. It is typically used to track and display incremental changes.
__Decrement Counter:__ It lets the user update the name value to a new string. It's useful for scenarios where dynamic updates to a displayed name are required.
## Structure
```
├─ public
│ └─ images - store images
│
├─ provider
│ └─ Provider.jsx - sets up a React context using the Context hook, providing a way to manage and share state
│
├─ src
│ ├─ App.jsx - main application component that typically includes routing and other high-level logic and display state value
│ ├─ Child.jsx - component that where state will change
│ ├─ Parent.jsx - component that help to increase tree size
│ ├─ SuperParent.jsx - component that help to increase tree size
│ └─ main.jsx - entry point file where the React application is rendered and the Redux provider is set up.
│
├─ .eslintrc.cjs - configuration for eslint
├─ .gitignore - store details about ingnored file by git
├─ README.md - serve a details documentation
├─ index.html - main HTML file for the application. It typically includes a
where your React app will be mounted. Vite injects the necessary scripts into this file.
├─ package-lock.json - contains metadata about dependencies, scripts, and other configurations
├─ package.json - contains metadata about dependencies, scripts, and other configurations.
├─ preview.png - preview image
├─ vercel.json - configuration for vercel
└─ vite.config.js - configuration for vite
```