{"_id":"@darkgugu/use-colyseus","name":"@darkgugu/use-colyseus","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@darkgugu/use-colyseus","version":"0.1.0","description":"A customized fork of use-colyseus with extended support for creating and joining Colyseus rooms.","license":"MIT","type":"module","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"dev":"vite","build":"tsc && vite build","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","preview":"vite preview","publish-package":"npm run build && npm publish --access public"},"author":{"name":"Icham Duret"},"keywords":["colyseus","multiplayer","react","hook"],"repository":{"type":"git","url":"git+https://github.com/darkgugu/use-colyseus.git"},"dependencies":{"@colyseus/schema":"^2.0.20","colyseus.js":"^0.15.14","react":"^18.2.0"},"devDependencies":{"@types/react":"^18.2.15","@types/react-dom":"^18.2.7","@typescript-eslint/eslint-plugin":"^6.0.0","@typescript-eslint/parser":"^6.0.0","@vitejs/plugin-react":"^4.0.3","eslint":"^8.45.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.3","typescript":"^5.0.2","vite":"^4.4.5","vite-plugin-dts":"^3.5.3"},"_id":"@darkgugu/use-colyseus@0.1.0","gitHead":"cab2dac1c6c9760d885c87c7996e8198467bdf78","bugs":{"url":"https://github.com/darkgugu/use-colyseus/issues"},"homepage":"https://github.com/darkgugu/use-colyseus#readme","_nodeVersion":"22.17.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-UqTYGmuRvj/gX/gs6nsMGsFM+tlJTt8ufoo++Ym5O28gP38KlHOjkCpKT+nfhtF3EOfAZ8DYKh+AVsrqkHPMpA==","shasum":"aa38749d1ffceda74952185b563b51720670558e","tarball":"https://registry.npmjs.org/@darkgugu/use-colyseus/-/use-colyseus-0.1.0.tgz","fileCount":4,"unpackedSize":8532,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIDUWewD3GgstuoGyA+kglzDefxgSLz3ax7ajxSJRnG1fAiBS9f0/cTqvLKtucaBm7H+hjJFhNKjI+Fr16Ls/O5aRAA=="}]},"_npmUser":{"name":"darkgugu","email":"icham.duret14@gmail.com"},"directories":{},"maintainers":[{"name":"darkgugu","email":"icham.duret14@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/use-colyseus_0.1.0_1753069503809_0.4859774802436869"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-21T03:45:03.707Z","0.1.0":"2025-07-21T03:45:03.984Z","modified":"2025-07-21T03:45:04.302Z"},"maintainers":[{"name":"darkgugu","email":"icham.duret14@gmail.com"}],"description":"A customized fork of use-colyseus with extended support for creating and joining Colyseus rooms.","homepage":"https://github.com/darkgugu/use-colyseus#readme","keywords":["colyseus","multiplayer","react","hook"],"repository":{"type":"git","url":"git+https://github.com/darkgugu/use-colyseus.git"},"author":{"name":"Icham Duret"},"bugs":{"url":"https://github.com/darkgugu/use-colyseus/issues"},"license":"MIT","readme":"# useColyseus Hooks 🎣 🏟️\r\n\r\nThis package contains a set of utility hooks to use Colyseus with React.\r\n\r\n[Colyseus](https://colyseus.io/) is a framework for writing your own authoritative multiplayer game servers using JavaScript/TypeScript and Node.js, and easily integrating it with your favorite game engine.\r\n\r\nThis package still needs to be battle-tested for production, but it gives a good glimpse of how Colyseus and React work together and how to handle external states on React.\r\n\r\n## Usage\r\n\r\n1. Install the package\r\n\r\n    ```bash\r\n    pnpm add use-colyseus\r\n    ```\r\n2. Create a `colyseus.ts` file on your React app\r\n    ```ts\r\n    import { colyseus } from \"use-colyseus\";\r\n\r\n    import { GameState } from \"shared/schema\"; // Your room schema\r\n    \r\n    export const {\r\n      client,\r\n      connectToColyseus,\r\n      joinColyseusRoomById,\r\n      createColyseusRoom,\r\n      disconnectFromColyseus,\r\n      useColyseusRoom,\r\n      useColyseusState,\r\n    } = colyseus<GameState>('ws://localhost:2567');\r\n    ```\r\n3. Import the hooks from your newly created `colyseus.ts` file and start building :)\r\n\r\n## Documentation\r\n\r\n- ### `colyseus`\r\n\r\n  Setup the Colyseus client and type the utility hooks.\r\n  \r\n  #### Parameters:\r\n  - endpoint: `string`\r\n  - schema?: `Schema`\r\n  \r\n  #### Return:\r\n  - `Client`\r\n  - `connectToColyseus`\r\n  - `joinColyseusRoom`\r\n  - `createColyseusRoom`\r\n  - `disconnectFromColyseus`\r\n  - `useColyseusRoom`\r\n  - `useColyseusState`\r\n\r\n  #### Example:\r\n  ```ts\r\n  export const {\r\n      client,\r\n      connectToColyseus,\r\n      joinColyseusRoom,\r\n      createColyseusRoom,\r\n      disconnectFromColyseus,\r\n      useColyseusRoom,\r\n      useColyseusState,\r\n    } = colyseus<GameState>('ws://localhost:2567');\r\n  ```\r\n\r\n- ### `connectToColyseus`\r\n\r\n  Connect the client to the specified Colyseus server room. Prevents duplicated connections.\r\n  \r\n  #### Parameters:\r\n  - roomName: `string`\r\n  - options?: `unknown`\r\n  \r\n  #### Return:\r\n  `Promise<void>`\r\n\r\n  #### Example:\r\n  ```ts\r\n  useEffect(() => {\r\n    (async () => {\r\n      await connectToColyseus(\"test\");\r\n    })();\r\n  \r\n    return () => {\r\n      disconnectFromColyseus();\r\n    };\r\n  }, []);\r\n  ```\r\n\r\n- ### `disconnectFromColyseus`\r\n\r\n  Disconnect the client from the current connected Colyseus server\r\n  \r\n  #### Parameters:\r\n\r\n  #### Return:\r\n  `Promise<void>`\r\n  \r\n  #### Example:\r\n  ```ts\r\n  useEffect(() => {\r\n    (async () => {\r\n      await connectToColyseus(\"test\");\r\n    })();\r\n  \r\n    return () => {\r\n      disconnectFromColyseus();\r\n    };\r\n  }, []);\r\n  ```\r\n\r\n- ### `useColyseusRoom`\r\n\r\n  Access the Colyseus room object. Shouldn't be used to access the state, `room.state` is not updated. Use `useColyseusState` instead.\r\n  \r\n  #### Parameters:\r\n\r\n  #### Return:\r\n  `Room`\r\n  \r\n  #### Example:\r\n  ```ts\r\n  const room = useColyseusRoom();\r\n  if (!room) return null;\r\n\r\n  console.log(room.sessionId);\r\n  ```\r\n\r\n  - ### `useColyseusState`\r\n\r\n  Access the Colyseus room state. Returns the complete state object updated in real-time. Use a selector to prevent re-renderings.\r\n  \r\n  #### Parameters:\r\n  - selector?: `(state: S) => unknown`\r\n\r\n  #### Return:\r\n  `Room`\r\n  \r\n  #### Example:\r\n  ```ts\r\n  const clients = useColyseusState((state) => state.clients); // Only re-render if `state.clients` has changed\r\n\r\n  // or\r\n\r\n  const state = useColyseusState(); // Causes a lot of re-renderings\r\n  ```\r\n\r\n## Acknowledgements\r\n- [Pedro Fontoura](https://github.com/pedr0fontoura) : Original maker of this project, go see his version for all Acknowledgements\r\n\r\n----\r\n\r\n","readmeFilename":"README.md","_rev":"1-dcab0e3a3d3dbdd1cd99ec75c4a0f185"}