https://github.com/chenhaojie9527/create-custom-context
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.
https://github.com/chenhaojie9527/create-custom-context
context custom-context game-development hooks react react-hooks state-management typescript
Last synced: 6 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/chenhaojie9527/create-custom-context
- Owner: ChenHaoJie9527
- Created: 2025-07-15T02:58:04.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-16T12:40:01.000Z (about 1 year ago)
- Last Synced: 2025-09-15T05:27:45.803Z (10 months ago)
- Topics: context, custom-context, game-development, hooks, react, react-hooks, state-management, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/create-custom-context
- Size: 115 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# create-custom-context
A React Context hook factory that enables using React hooks within context value functions. Perfect for game development, state management, and complex interactive applications.
## Features
- 🎣 Use React hooks in context value functions
- 🔄 Real-time state updates with event listeners
- 📦 Full TypeScript support
- 🪶 Zero dependencies (except React)
## Installation
```bash
npm install create-custom-context
```
## Quick Start
```tsx
import { createCustomContext } from 'create-custom-context';
import { useState, useEffect } from 'react';
// Create context with hooks
const [Provider, useContext] = createCustomContext(() => {
const [count, setCount] = useState(0);
useEffect(() => {
const timer = setInterval(() => setCount(c => c + 1), 1000);
return () => clearInterval(timer);
}, []);
return { count, setCount };
});
// Use in components
function App() {
return (
);
}
function Counter() {
const { count, setCount } = useContext();
return (
Count: {count}
setCount(0)}>Reset
);
}
```
## Game Development Example
```tsx
const [GameProvider, useGame] = createCustomContext(() => {
const [weapon, setWeapon] = useState(0);
useEffect(() => {
const handleKey = (e: KeyboardEvent) => {
if (e.code === 'Digit1') setWeapon(0);
if (e.code === 'Digit2') setWeapon(1);
};
document.addEventListener('keydown', handleKey);
return () => document.removeEventListener('keydown', handleKey);
}, []);
return { weapon, weapons: ['Sword', 'Bow'] };
});
```
## API
### `createCustomContext(contextValue: () => T): [Provider, useContextHook]`
**Parameters:**
- `contextValue`: Function that returns context value (can use React hooks)
**Returns:**
- `Provider`: React component to wrap your app
- `useContextHook`: Hook to access context value
**TypeScript:**
```tsx
const [Provider, useHook] = createCustomContext<{count: number}>(() => ({
count: useState(0)[0]
}));
```
## Error Handling
The hook throws an error if used outside the Provider:
```tsx
function Component() {
const data = useHook(); // Error: Hook must be used within Provider
}
```
## License
MIT © [ChenHaoJie9527](https://github.com/ChenHaoJie9527)