{"id":17356543,"url":"https://github.com/emoore29/react-context-playground","last_synced_at":"2026-01-21T00:33:31.407Z","repository":{"id":216618859,"uuid":"741786259","full_name":"emoore29/react-context-playground","owner":"emoore29","description":"A simple app for understanding the usage of React Context.","archived":false,"fork":false,"pushed_at":"2024-10-07T08:26:06.000Z","size":508,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-02T09:26:38.238Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://emoore29.github.io/react-context-playground/","language":"TypeScript","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/emoore29.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,"zenodo":null}},"created_at":"2024-01-11T05:29:15.000Z","updated_at":"2024-10-07T08:26:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"5ed4dd26-2641-4549-be91-c8da61ba97fc","html_url":"https://github.com/emoore29/react-context-playground","commit_stats":null,"previous_names":["emoore29/react-context-playground"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/emoore29/react-context-playground","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emoore29%2Freact-context-playground","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emoore29%2Freact-context-playground/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emoore29%2Freact-context-playground/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emoore29%2Freact-context-playground/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/emoore29","download_url":"https://codeload.github.com/emoore29/react-context-playground/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emoore29%2Freact-context-playground/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28619779,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T23:49:58.628Z","status":"ssl_error","status_checked_at":"2026-01-20T23:47:29.996Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2024-10-15T18:57:13.044Z","updated_at":"2026-01-21T00:33:31.402Z","avatar_url":"https://github.com/emoore29.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-Context-Playground\n\nThis is a simple app for understanding the usage of React Context.\n\nReact Context is a global state management system: a way to share data between components in an app without drilling through component props.\n\nContext can be useful when data needs to be accessed by multiple components at different levels in the app component hierarchy.\n\nThe React documentation is fairly easy to follow for React Context:\n\n- [createContext](https://react.dev/reference/react/createContext)\n- [useContext](https://react.dev/reference/react/useContext#)\n\n## App Structure\n\n### src/context/ThemeContext.tsx\n\nThemeContext is created with default values.\n\n![Screenshot of code for createContext()](image-5.png)\n\n### src/components/ThemeProvider.tsx\n\nProvider component is created which includes the state value (theme) and the state setter (setTheme). This will wrap the entire app (as shown in main.tsx below).\n\n![Screenshot of ThemeProvider component](image-6.png)\n\n### src/main.tsx\n\n![App wrapped in ThemeProvider](image-4.png)\n\n### src/App.tsx\n\nThe app retrieves **theme** with useContext() to set the theme for the app (using data-theme and CSS variables).\n\n![Screenshot of App component.](image-7.png)\n\n### src/components/ThemeSelector\n\nThe ThemeSelector retrieves **setTheme** with useContext() and can now use it to setThemes with buttons, without needing to pass setTheme as a prop from its parent, the App.\n\n![Screenshot of ThemeSelector](image-8.png)\n\n### src/components/ChildComponent\n\nChildComponent also retrieves **theme** with useContext(), so, again, we don't need to pass theme as a prop from its parent, the App.\n\n![Screenshot of ChildComponent](image-9.png)\n\n### src/components/RogueComponent\n\nRogueComponent, despite being a child of the App which is wrapped in the ThemeProvider, is wrapped in its own Provider:\n\n![Screenshot of RogueComponent](image-10.png)\n\nThe Provider **theme** and **setTheme** default values will be the same as the ThemeContext default values. But because this component has its own state, when **setTheme** is called, it will update the theme only for this Provider. So the RogueComponent theme will change, but this will not affect the App theme. Likewise, updating the App theme will not affect the RogueComponent theme.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femoore29%2Freact-context-playground","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Femoore29%2Freact-context-playground","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femoore29%2Freact-context-playground/lists"}