{"id":31737391,"url":"https://github.com/chenhaojie9527/create-custom-context","last_synced_at":"2026-01-20T16:44:05.029Z","repository":{"id":304776773,"uuid":"1019881401","full_name":"ChenHaoJie9527/create-custom-context","owner":"ChenHaoJie9527","description":"A React Context hook factory that enables using React hooks within context value functions. Perfect for game development, state management, and complex interactive applications with TypeScript support.","archived":false,"fork":false,"pushed_at":"2025-07-16T12:40:01.000Z","size":118,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-15T05:27:45.803Z","etag":null,"topics":["context","custom-context","game-development","hooks","react","react-hooks","state-management","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/create-custom-context","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/ChenHaoJie9527.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":"2025-07-15T02:58:04.000Z","updated_at":"2025-07-16T12:40:02.000Z","dependencies_parsed_at":"2025-07-15T10:58:43.469Z","dependency_job_id":"2b2a9f18-dd4d-4a99-8a0d-22fd5e32b377","html_url":"https://github.com/ChenHaoJie9527/create-custom-context","commit_stats":null,"previous_names":["chenhaojie9527/create-custom-context"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/ChenHaoJie9527/create-custom-context","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChenHaoJie9527%2Fcreate-custom-context","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChenHaoJie9527%2Fcreate-custom-context/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChenHaoJie9527%2Fcreate-custom-context/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChenHaoJie9527%2Fcreate-custom-context/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ChenHaoJie9527","download_url":"https://codeload.github.com/ChenHaoJie9527/create-custom-context/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChenHaoJie9527%2Fcreate-custom-context/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279001123,"owners_count":26083021,"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","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["context","custom-context","game-development","hooks","react","react-hooks","state-management","typescript"],"created_at":"2025-10-09T09:09:53.245Z","updated_at":"2025-10-09T09:12:31.785Z","avatar_url":"https://github.com/ChenHaoJie9527.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# create-custom-context\n\nA React Context hook factory that enables using React hooks within context value functions. Perfect for game development, state management, and complex interactive applications.\n\n## Features\n\n- 🎣 Use React hooks in context value functions\n- 🔄 Real-time state updates with event listeners\n- 📦 Full TypeScript support\n- 🪶 Zero dependencies (except React)\n\n## Installation\n\n```bash\nnpm install create-custom-context\n```\n\n## Quick Start\n\n```tsx\nimport { createCustomContext } from 'create-custom-context';\nimport { useState, useEffect } from 'react';\n\n// Create context with hooks\nconst [Provider, useContext] = createCustomContext(() =\u003e {\n  const [count, setCount] = useState(0);\n  \n  useEffect(() =\u003e {\n    const timer = setInterval(() =\u003e setCount(c =\u003e c + 1), 1000);\n    return () =\u003e clearInterval(timer);\n  }, []);\n  \n  return { count, setCount };\n});\n\n// Use in components\nfunction App() {\n  return (\n    \u003cProvider\u003e\n      \u003cCounter /\u003e\n    \u003c/Provider\u003e\n  );\n}\n\nfunction Counter() {\n  const { count, setCount } = useContext();\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eCount: {count}\u003c/p\u003e\n      \u003cbutton onClick={() =\u003e setCount(0)}\u003eReset\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Game Development Example\n\n```tsx\nconst [GameProvider, useGame] = createCustomContext(() =\u003e {\n  const [weapon, setWeapon] = useState(0);\n  \n  useEffect(() =\u003e {\n    const handleKey = (e: KeyboardEvent) =\u003e {\n      if (e.code === 'Digit1') setWeapon(0);\n      if (e.code === 'Digit2') setWeapon(1);\n    };\n    document.addEventListener('keydown', handleKey);\n    return () =\u003e document.removeEventListener('keydown', handleKey);\n  }, []);\n  \n  return { weapon, weapons: ['Sword', 'Bow'] };\n});\n```\n\n## API\n\n### `createCustomContext\u003cT\u003e(contextValue: () =\u003e T): [Provider, useContextHook]`\n\n**Parameters:**\n- `contextValue`: Function that returns context value (can use React hooks)\n\n**Returns:**\n- `Provider`: React component to wrap your app\n- `useContextHook`: Hook to access context value\n\n**TypeScript:**\n```tsx\nconst [Provider, useHook] = createCustomContext\u003c{count: number}\u003e(() =\u003e ({\n  count: useState(0)[0]\n}));\n```\n\n## Error Handling\n\nThe hook throws an error if used outside the Provider:\n\n```tsx\nfunction Component() {\n  const data = useHook(); // Error: Hook must be used within Provider\n}\n```\n\n## License\n\nMIT © [ChenHaoJie9527](https://github.com/ChenHaoJie9527) ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchenhaojie9527%2Fcreate-custom-context","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchenhaojie9527%2Fcreate-custom-context","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchenhaojie9527%2Fcreate-custom-context/lists"}