{"id":22831292,"url":"https://github.com/masum184e/react_context_hook_basic_template","last_synced_at":"2025-03-31T01:48:19.166Z","repository":{"id":223608883,"uuid":"761010585","full_name":"masum184e/react_context_hook_basic_template","owner":"masum184e","description":"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.","archived":false,"fork":false,"pushed_at":"2024-06-04T10:28:35.000Z","size":88,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-06T07:11:16.860Z","etag":null,"topics":["context","global-state-management","react","react-context","react-context-hooks","state-mangement","usecontext","usecontext-hook"],"latest_commit_sha":null,"homepage":"https://react-context-hook-basic-template.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/masum184e.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-21T04:16:12.000Z","updated_at":"2024-06-04T10:28:39.000Z","dependencies_parsed_at":"2024-02-21T06:23:20.586Z","dependency_job_id":"19003577-7484-4821-852c-3799d2e32e11","html_url":"https://github.com/masum184e/react_context_hook_basic_template","commit_stats":null,"previous_names":["masum184e/react_context_hook_basic_template"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masum184e%2Freact_context_hook_basic_template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masum184e%2Freact_context_hook_basic_template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masum184e%2Freact_context_hook_basic_template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masum184e%2Freact_context_hook_basic_template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/masum184e","download_url":"https://codeload.github.com/masum184e/react_context_hook_basic_template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246403895,"owners_count":20771526,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["context","global-state-management","react","react-context","react-context-hooks","state-mangement","usecontext","usecontext-hook"],"created_at":"2024-12-12T20:19:58.721Z","updated_at":"2025-03-31T01:48:19.117Z","avatar_url":"https://github.com/masum184e.png","language":"JavaScript","readme":"## React Context Hook Basic Template\n\n\u003cp textAlign=\"justify\"\u003eContext hook provides a way to pass data through the component tree without having to pass props down manually at every level. \u003c/p\u003e\n\n## Preview\n\u003cimg src=\"https://github.com/masum184e/react_context_hook_basic_template/blob/main/preview.png\" \u003e\n\u003ca href=\"https://react-context-hook-basic-template.vercel.app//\"\u003e\u003cb\u003eLive View\u003c/b\u003e\u003c/a\u003e\n\n## Requirements\n\n[Install Node On Your Device](https://nodejs.org/)\n\n## How to Run\n\n```\ngit clone https://github.com/masum184e/react_context_hook_basic_template.git\ncd react_context_hook_basic_template\nnpm install\nnpm run dev\n```\n\n## Explaination\n\n\u003cp\u003e We bassically need 3 different component:\u003c/p\u003e\n\n1. **wrapper:**\n\n    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.\n\n   ```jsx\n    import React from 'react'\n    import ReactDOM from 'react-dom/client'\n    import App from './App.jsx'\n    import Provider from '../provider/Provider.jsx'\n\n    ReactDOM.createRoot(document.getElementById('root')).render(\n    \u003cReact.StrictMode\u003e\n      \u003cProvider\u003e\n        \u003cApp /\u003e\n      \u003c/Provider\u003e\n    \u003c/React.StrictMode\u003e,\n    )\n\n2. **provider:**\n\n    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.\n\n   ```jsx\n    import { createContext, useState } from \"react\";\n\n    export const ImplementContext = createContext(null)\n\n    const Provider = ({ children }) =\u003e {\n        const [count, setCount] = useState(0);\n        const [name, setName] = useState(\"\");\n\n        const contextValue = {\n            count,\n            setCount,\n            name,\n            setName\n        }\n\n        return (\n            \u003cImplementContext.Provider value={contextValue}\u003e{children}\u003c/ImplementContext.Provider\u003e\n        )\n    }\n\n    export default Provider\n\n3. **consumer:**\n\n    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.\n\n```jsx\n    import { useContext } from \"react\"\n    import { ImplementContext } from \"../provider/Provider\"\n\n    const Child = () =\u003e {\n    const { setCount, setName } = useContext(ImplementContext)\n    return (\n      \u003c\u003e\n        \u003cdiv\u003e\n            \u003ch5\u003eI\u0026apos;m from Child\u003c/h5\u003e\n        \u003c/div\u003e\n        \u003cdiv style={{ display: \"flex\", gap: \"10px\" }}\u003e\n            \u003cbutton\n            aria-label=\"Increment value\"\n            onClick={() =\u003e setCount(prev =\u003e prev = prev + 1)}\n            \u003e\n            Increment\n            \u003c/button\u003e\n            \u003cbutton\n            aria-label=\"Decrement value\"\n            onClick={() =\u003e setCount(prev =\u003e prev = prev - 1)}\n            \u003e\n            Decrement\n            \u003c/button\u003e\n        \u003c/div\u003e\n        \u003cdiv style={{ marginTop: \"5px\" }}\u003e\n            \u003cinput type=\"text\" name=\"\" id=\"\" onChange={(event) =\u003e setName(event.target.value)} /\u003e\n        \u003c/div\u003e\n      \u003c/\u003e\n     )\n    }\n    export default Child\n``` \n```jsx\n    import { useContext } from \"react\"\n    import SuperParent from \"./SuperParent\"\n    import { ImplementContext } from \"../provider/Provider\"\n\n    const App = () =\u003e {\n    const { count, name } = useContext(ImplementContext)\n    return (\n      \u003c\u003e\n        \u003ch1 style={{ textAlign: \"center\" }}\u003eHello React Context\u003c/h1\u003e\n        \u003ch2\u003eI\u0026apos;m from App, my name {name} \u0026 value {count}\u003c/h2\u003e\n        \u003cSuperParent /\u003e\n      \u003c/\u003e\n     )\n    }\n    export default App\n```\n\n## Features\n__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.\n\n__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.\n\n## Structure\n```\n├─ public\n│  └─ images                  - store images\n│\n├─ provider\n│  └─ Provider.jsx            - sets up a React context using the Context hook, providing a way to manage and share state \n│\n├─ src\n│  ├─ App.jsx                 - main application component that typically includes routing and other high-level logic and display state value\n│  ├─ Child.jsx               - component that where state will change\n│  ├─ Parent.jsx              - component that help to increase tree size\n│  ├─ SuperParent.jsx         - component that help to increase tree size\n│  └─ main.jsx                - entry point file where the React application is rendered and the Redux provider is set up.\n│\n├─ .eslintrc.cjs              - configuration for eslint\n├─ .gitignore                 - store details about ingnored file by git\n├─ README.md                  - serve a details documentation\n├─ index.html                 - main HTML file for the application. It typically includes a \u003cdiv id=\"root\"\u003e\u003c/div\u003e where your React app will be mounted. Vite injects the necessary scripts into this file.\n├─ package-lock.json          - contains metadata about dependencies, scripts, and other configurations\n├─ package.json               - contains metadata about dependencies, scripts, and other configurations.\n├─ preview.png                - preview image\n├─ vercel.json                - configuration for vercel\n└─ vite.config.js             - configuration for vite\n```","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmasum184e%2Freact_context_hook_basic_template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmasum184e%2Freact_context_hook_basic_template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmasum184e%2Freact_context_hook_basic_template/lists"}