{"id":26552074,"url":"https://github.com/maxzinchenko/react-use-socket","last_synced_at":"2026-04-18T04:31:18.521Z","repository":{"id":43859979,"uuid":"445657378","full_name":"maxzinchenko/react-use-socket","owner":"maxzinchenko","description":"The package which makes web socket management much easier by using hooks.","archived":false,"fork":false,"pushed_at":"2022-05-05T18:34:10.000Z","size":675,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-09-30T16:42:12.970Z","etag":null,"topics":["react","react-use-socket","socket","websocket"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-use-socket","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maxzinchenko.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-01-07T21:29:45.000Z","updated_at":"2022-02-08T19:54:57.000Z","dependencies_parsed_at":"2022-08-30T17:41:33.675Z","dependency_job_id":null,"html_url":"https://github.com/maxzinchenko/react-use-socket","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/maxzinchenko/react-use-socket","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxzinchenko%2Freact-use-socket","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxzinchenko%2Freact-use-socket/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxzinchenko%2Freact-use-socket/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxzinchenko%2Freact-use-socket/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maxzinchenko","download_url":"https://codeload.github.com/maxzinchenko/react-use-socket/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxzinchenko%2Freact-use-socket/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31956789,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T00:39:45.007Z","status":"online","status_checked_at":"2026-04-18T02:00:07.018Z","response_time":103,"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":["react","react-use-socket","socket","websocket"],"created_at":"2025-03-22T08:23:35.090Z","updated_at":"2026-04-18T04:31:18.504Z","avatar_url":"https://github.com/maxzinchenko.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Use Socket\n\nThe package which makes web socket management much easier by using hooks.\u003cbr\u003e\nThe package is built over the \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/WebSocket\"\u003eWebSocket\u003c/a\u003e constructor from browser API.\n\n\u003ca href=\"https://npmjs.com/package/react-use-socket\" target=\"\\_blank\"\u003e\n  \u003cimg alt=\"npm version\" src=\"https://img.shields.io/npm/v/react-use-socket.svg\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://bundlephobia.com/result?p=react-use-socket@latest\" target=\"\\_blank\"\u003e\n  \u003cimg alt=\"size\" src=\"https://badgen.net/bundlephobia/minzip/react-use-socket@latest\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://npmjs.com/package/react-use-socket\" target=\"\\_blank\"\u003e\n  \u003cimg alt=\"npm downloads\" src=\"https://img.shields.io/npm/dm/react-use-socket.svg\" /\u003e\n\u003c/a\u003e\n\n\n\n---\n\n\n\n## Structure\n\n- [Installation](#installation)\n- [One socket example](https://github.com/maxzinchenko/react-use-socket/blob/master/example/src/one-socket.tsx)\n- [Multiple sockets example](https://github.com/maxzinchenko/react-use-socket/blob/master/example/src/many-sockets.tsx)\n- [Provider options](#provider-options)\n  - [url](#url)\n  - [getRequestIndicator](#getRequestIndicator)\n  - [getResponseIndicator](#getResponseIndicator)\n  - [getError](#getError)\n  - [autoConnect](#autoConnect)\n  - [protocols](#protocols)\n  - [shouldReconnect](#shouldReconnect)\n  - [reconnectionIntervals](#reconnectionInterval)\n  - [serialize](#serialize)\n  - [deserialize](#deserialize)\n  - [debug](#debug)\n- [Hooks usage](#hooks-usage)\n  - [useWebSocketState](#useWebSocketState)\n  - [useSignal](#useSignal)\n  - [useLazySignal](#useLazySignal)\n  - [useSubscription](#useSubscription)\n  - [useLazySubscription](#useLazySubscription)\n- [Custom Error Type](#custom-error-type)\n- [Provider options declaration](#provider-options-declaration)\n  - [Passing own types to WebSocketOptions type](#passing-own-types-to-websocketoptions-type)\n\n\n---\n\n\n## Installation\n\n```\n# using npm\nnpm install react-use-socket\n\n# using yarn\nyarn add react-use-socket\n```\n\n\n---\n\n\n## Provider options\n\n`WebSocketOptions`\n\n| Name                                              | Required | Type                                                | Default     |\n| ------------------------------------------------- | -------- | --------------------------------------------------- | ----------- |\n| [url](#url)                                       | Yes      | `string`                                            | -           |\n| [getRequestIndicator](#getRequestIndicator)       | Yes      | `(req: Req) =\u003e string OR number`                    | -           |\n| [getResponseIndicator](#getResponseIndicator)     | Yes      | `(res: Res) =\u003e string OR number`                    | -           |\n| [getError](#getError)                             | Yes      | `(res: Res) =\u003e string OR Err OR null`       | -           |\n| [autoConnect](#autoConnect)                       | No       | `boolean`                                           | `true`      |\n| [protocols](#protocols)                           | No       | `string OR string[]`                                | -           |\n| [shouldReconnect](#shouldReconnect)               | No       | `((event: CloseEvent) =\u003e boolean) OR boolean`       | `true`      |\n| [reconnectionIntervals](#reconnectionInterval)    | No       | `number OR number[]`                                | `1000`      |\n| [serialize](#serialize)                           | No       | `(req: Req) =\u003e SReq`                                | -           | \n| [deserialize](#deserialize)                       | No       | `(res: Res) =\u003e DRes`                                | -           |\n| [debug](#debug)                                   | No       | `boolean`                                           | -           |\n\n---\n\n## url (required)\n\n`string`\n\nUrl for the \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/WebSocket\"\u003eWebSocket\u003c/a\u003e constructor.\n\n```ts\nurl: 'ws://localhost:3000'\n```\n\n```ts\nurl: 'wss://example.com'\n```\n\n## getRequestIndicator (required)\n\n`(res: Res) =\u003e string | number`\n\n**WARNING:** Make sure that the `getRequestIndicator(req)` value indicator is exactly same as `getResponseIndicator(res)`.\u003cbr\u003e\nThe package needs to know which the request received response belongs to.\n\nLet us say that the request which needs to be sent to the API looks as:\n\n**(this is just an example it's not a requirement to the API request type)**\n\n```ts\nreq = {\n  get_user: {\n    id: 1\n  }\n}\n```\n\nThe indicator is `get_user` so the prop should be:\n\n```ts\ngetRequestIndicator: req =\u003e Object.keys(req)[0]\n```\n\n## getResponseIndicator (required)\n\n`(res: Res) =\u003e string | number`\n\n**WARNING:** Make sure that the `getResponseIndicator(res)` value indicator is exactly same as `getRequestIndicator(req)`.\u003cbr\u003e\nThe package needs to know which the request received response belongs to.\n\nLet us say that the response which comes from the API and needs to be handled looks as:\u003cbr\u003e\n\n**(this is just an example it's not a requirement to the API response type)**\n\n```ts\nres = {\n  get_user: {\n    id: 1,\n    username: '@...',\n    avatarUrl: 'https://...'\n  }\n}\n```\n\nThe indicator is `get_user` so the prop should be:\n\n```ts\ngetResponseIndicator: req =\u003e Object.keys(req)[0]\n```\n\n## getError (required)\n\n`(res: Res) =\u003e string | Err | null`\n\nLet us say that the failure response which comes from the API looks as:\u003cbr\u003e\n\n**(this is just an example it's not a requirement to the API response type)**\n\n```ts\nres = {\n  get_user: {\n    error: 'Not found'\n  }\n}\n```\n\nThe error is `Not found` so the prop should be:\n\n```ts\ngetError: res =\u003e res[Object.keys(req)[0]].error || null\n```\n\nWhen using custom error type `Err`:\n(see doc of the [Custom error type](#Custom error type))\n```ts\nres = {\n  get_user: {\n    error: {\n      message: 'Not found',\n      meta: {...}\n    }\n  }\n}\n```\n\nThe error is an `object` so the prop should be:\n\n```ts\ngetError: res =\u003e res[Object.keys(req)[0]].error || null\n```\n\n## autoConnect\n\n`boolean` - (`true` by default)\n\nWhen `true` you don't need to send anything to connect it.\u003cbr\u003e\nWhen `false` you need to connect the socket manually by using `useWebSocketState` hook.\n\n```ts\nautoConnect: true\n```\n\n## shouldReconnect\n\n`((event: CloseEvent) =\u003e boolean) | boolean` - (`true` by default)\n\nWhen `true` the socket tries to reconnect if `event.code !== 1005`.\u003cbr\u003e\nWhen the predicate is passed you are able to decide if the socket needs to be reconnected.\n\n```ts\nshouldReconnect: true\n```\n\n## debug\n\n`boolean`\n\nWhen `true` the package shows additional logs.\n\n```ts\ndebug: ture\n```\n\n## protocols\n\n`boolean`\n\nProtocols for the \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/WebSocket\"\u003eWebSocket\u003c/a\u003e constructor.\n\n```ts\nprotocols: 'some protocol'\n```\n\n```ts\nprotocols: ['some protocol']\n```\n\n## reconnectionInterval\n\n`number | number[]` - (`1000` by default)\n\n\u003cb\u003eIn milliseconds.\u003c/b\u003e\u003cbr\u003e\nWhen array each new connection uses the next number from the array for a timeout to avoid DDOSing a server.\n\n```ts\nreconnectionInterval: 1000\n```\n\nWhen reconnection count reaches the last array element it uses it each the next time.\u003cbr\u003e\nWhen the socket connects back the next reconnection loop will start from the `0` index.\n\n```ts\nreconnectionInterval: [0, 1000, 2000, 3000, 4000, 5000, 10000]\n```\n\n## serialize\n\n`(req: Req) =\u003e SReq`\u003cbr\u003e\n`Req` and `SReq` are templates of the generic `MiddlewareOptions` type\n\nThe format function gets called to prepare the data to get submitted to the server. For example, `camelCase` to `snake_case` conversion.\n\n```ts\nserialize: req =\u003e {\n  return {\n    ...req,\n    time: Date.now()\n  }\n}\n```\n\n## deserialize\n\n`(res: Res) =\u003e DRes`\u003cbr\u003e\n`Res` and `DRes` are templates of the generic `MiddlewareOptions` type\n\nThe format function gets called to prepare the message to get submitted to the `onMessage` callback. For example, `snake_case` to `camelCase` conversion.\n\n```ts\ndeserialize: res =\u003e {\n  return res.data\n}\n```\n\n\n---\n\n## Custom Error Type\n\n```ts\nenum Socket {\n  MAIN = 'Main'\n}\n\ntype Req = {\n  get_user: {\n    id: number\n  }\n}\n\ntype DRes = {\n  get_user: {\n    username: string\n    avatarUrl: string\n  }\n}\n\ntype Error = {\n  message: string\n  meta: {\n    timestamp: number\n    service: string\n    ...\n  }\n}\n```\n\nPutting these types into a generic hook:\n\n```ts\nconst signalData = useSignal\u003cReq, Res, Socket, Error\u003e({...})\n```\n\n```ts\nconst [signalData, signalControls] = useLazySignal\u003cReq, Res, Socket, Error\u003e()\n```\n\n```ts\nconst [subscriptionData, subscriptionControls] = useSubscription\u003cDRes, Socket, Error\u003e('')\n```\n\n```ts\nconst [subscriptionData, subscriptionControls] = useLazySubscription\u003cDRes, Socket, Error\u003e('')\n```\n\n\n---\n\n\n## Hooks usage\n\n### useWebSocketState\n\nWhen you use only \u003cb\u003eone socket\u003c/b\u003e, passing the socket name is optional.\n\n```tsx\nimport React from 'react';\nimport { useWebSocketState } from 'react-awesome-websocket';\n\nconst Component = () =\u003e {\n  const [connected, { open, close }] = useWebSocketState();\n\n  return (\n    \u003c\u003e\n      \u003ch1\u003euseWebSocketState example\u003c/h1\u003e\n      \u003ch2\u003eConnected: {connected}\u003c/h2\u003e\n      \u003cbutton onClick={open} disabled={connected}\u003eOpen\u003c/button\u003e\n      \u003cbutton onClick={close} disabled={!connected}\u003eClose\u003c/button\u003e\n    \u003c\u003e\n  );\n};\n```\n\nWhen you use \u003cb\u003emultiple sockets\u003c/b\u003e, passing the socket name is required. Otherwise, you get the\n`The \"name\" is required for the hook usage` error.\n\n```tsx\nimport React from 'react';\nimport { useWebSocketState } from 'react-awesome-websocket';\n\nenum Socket {\n  MAIN = 'Main'\n}\n\nconst Component = () =\u003e {\n  const [connected, { open, close }] = useWebSocketState\u003cSocket\u003e({ name: Socket.MAIN });\n\n  return (\n    \u003c\u003e\n      \u003ch1\u003euseWebSocketState example\u003c/h1\u003e\n      \u003ch2\u003eConnected: {connected}\u003c/h2\u003e\n      \u003cbutton onClick={open} disabled={connected}\u003eOpen\u003c/button\u003e\n      \u003cbutton onClick={close} disabled={!connected}\u003eClose\u003c/button\u003e\n    \u003c\u003e\n  );\n};\n```\n\n### useSignal\n\nWhen you use only \u003cb\u003eone socket\u003c/b\u003e, passing the socket name is optional.\n\n```tsx\nimport React from 'react';\nimport { useSignal } from 'react-awesome-websocket';\n\ntype Req = {\n  get_user: {\n    id: number\n  }\n}\n\ntype Res = {\n  get_user: {\n    username: string\n    avatarUrl: string\n  }\n}\n\nconst Component = () =\u003e {\n  const { loading, error, data, mounted } = useSignal\u003cReq, Res\u003e({\n    get_user: { id: 1 }\n  });\n\n  return (\n    \u003c\u003e\n      \u003ch1\u003euseSignal example\u003c/h1\u003e\n      \u003ch2\u003eLoading: {loading}\u003c/h2\u003e\n      \u003ch2\u003eError: {error}\u003c/h2\u003e\n      \u003ch2\u003eMounted: {mounted}\u003c/h2\u003e\n      \u003ch2\u003eData:\u003c/h2\u003e\n      \u003cpre\u003e{JSON.stringify(data, null, 4)}\u003c/pre\u003e\n    \u003c\u003e\n  );\n};\n```\n\nWhen you use \u003cb\u003emultiple sockets\u003c/b\u003e, passing the socket name is required. Otherwise, you get the\n`The \"name\" is required for the hook usage` error.\n\n```tsx\nimport React from 'react';\nimport { useSignal } from 'react-awesome-websocket';\n\nenum Socket {\n  MAIN = 'Main'\n}\n\ntype Req = {\n  get_user: {\n    id: number\n  }\n}\n\ntype Res = {\n  get_user: {\n    username: string\n    avatarUrl: string\n  }\n}\n\nconst Component = () =\u003e {\n  const { loading, error, data, mounted } = useSignal\u003cReq, Res, Socket\u003e({\n    get_user: { id: 1 }\n  }, { name: Socket.MAIN });\n\n  return (\n    \u003c\u003e\n      \u003ch1\u003euseSignal example\u003c/h1\u003e\n      \u003ch2\u003eLoading: {loading}\u003c/h2\u003e\n      \u003ch2\u003eError: {error}\u003c/h2\u003e\n      \u003ch2\u003eMounted: {mounted}\u003c/h2\u003e\n      \u003ch2\u003eData:\u003c/h2\u003e\n      \u003cpre\u003e{JSON.stringify(data, null, 4)}\u003c/pre\u003e\n    \u003c\u003e\n  );\n};\n```\n\n\n### useLazySignal\n\nWhen you use only \u003cb\u003eone socket\u003c/b\u003e, passing the socket name is optional.\n\n```tsx\nimport React from 'react';\nimport { useLazySignal } from 'react-awesome-websocket';\n\ntype Req = {\n  get_user: {\n    id: number\n  }\n}\n\ntype DRes = {\n  get_user: {\n    username: string\n    avatarUrl: string\n  }\n}\n\nconst Component = () =\u003e {\n  const [signalData, { send }] = useLazySignal\u003cReq, DRes\u003e({\n    get_user: { id: 1 }\n  });\n\n  const { loading, error, data, mounted } = signalData;\n  \n  const handleSendClick = () =\u003e {\n    send({ get_user: { id: 1 } });\n  }\n\n  return (\n    \u003c\u003e\n      \u003ch1\u003euseLazySignal example\u003c/h1\u003e\n      \u003cbutton onClick={handleSendClick}\u003eSend Request\u003c/button\u003e\n      \u003ch2\u003eLoading: {loading}\u003c/h2\u003e\n      \u003ch2\u003eError:\u003c/h2\u003e\n      \u003cpre\u003e{JSON.stringify(error, null, 4)}\u003c/pre\u003e\n      \u003ch2\u003eMounted: {mounted}\u003c/h2\u003e\n      \u003ch2\u003eData:\u003c/h2\u003e\n      \u003cpre\u003e{JSON.stringify(data, null, 4)}\u003c/pre\u003e\n    \u003c\u003e\n  );\n};\n```\n\nWhen you use \u003cb\u003emultiple sockets\u003c/b\u003e, passing the socket name is required. Otherwise, you get the\n`The \"name\" is required for the hook usage` error.\n\n```tsx\nimport React from 'react';\nimport { useLazySignal } from 'react-awesome-websocket';\n\nenum Socket {\n  MAIN = 'Main'\n}\n\ntype Req = {\n  get_user: {\n    id: number\n  }\n}\n\ntype DRes = {\n  get_user: {\n    username: string\n    avatarUrl: string\n  }\n}\n\nconst Component = () =\u003e {\n  const [signalData, { send }] = useLazySignal\u003cReq, DRes, Socket\u003e({\n    get_user: { id: 1 }\n  }, { name: Socket.MAIN });\n\n  const { loading, error, data, mounted } = signalData;\n  \n  const handleSendClick = () =\u003e {\n    send({ get_user: { id: 1 } });\n  }\n\n  return (\n    \u003c\u003e\n      \u003ch1\u003euseLazySignal example\u003c/h1\u003e\n      \u003cbutton onClick={handleSendClick}\u003eSend Request\u003c/button\u003e\n      \u003ch2\u003eLoading: {loading}\u003c/h2\u003e\n      \u003ch2\u003eError:\u003c/h2\u003e\n      \u003cpre\u003e{JSON.stringify(error, null, 4)}\u003c/pre\u003e\n      \u003ch2\u003eMounted: {mounted}\u003c/h2\u003e\n      \u003ch2\u003eData:\u003c/h2\u003e\n      \u003cpre\u003e{JSON.stringify(data, null, 4)}\u003c/pre\u003e\n    \u003c\u003e\n  );\n};\n```\n\n\n### useSubscription\n\nWhen you use only \u003cb\u003eone socket\u003c/b\u003e, passing the socket name is optional.\n\n```tsx\nimport React from 'react';\nimport { useSubscription } from 'react-awesome-websocket';\n\ntype DRes = {\n  user_update: {\n    username: string\n    avatarUrl: string\n  }\n}\n\nconst Component = () =\u003e {\n  const [{ data, error }, { stop }] = useSubscription\u003cDRes\u003e('user_update');\n\n  return (\n    \u003c\u003e\n      \u003ch1\u003euseSubscription example\u003c/h1\u003e\n      \u003cbutton onClick={stop}\u003eStop subscription\u003c/button\u003e\n      \u003ch2\u003eError: {error}\u003c/h2\u003e\n      \u003ch2\u003eData:\u003c/h2\u003e\n      \u003cpre\u003e{JSON.stringify(data, null, 4)}\u003c/pre\u003e\n    \u003c\u003e\n  );\n};\n```\n\nWhen you use \u003cb\u003emultiple sockets\u003c/b\u003e, passing the socket name is required. Otherwise, you get the\n`The \"name\" is required for the hook usage` error.\n\n```tsx\nimport React from 'react';\nimport { useSubscription } from 'react-awesome-websocket';\n\nenum Socket {\n  MAIN = 'Main'\n}\n\ntype DRes = {\n  user_update: {\n    username: string\n    avatarUrl: string\n  }\n}\n\nconst Component = () =\u003e {\n  const [{ data, error }, { stop }] = useSubscription\u003cDRes, Socket\u003e('user_update', {\n    name: Socket.MAIN\n  });\n  return (\n    \u003c\u003e\n      \u003ch1\u003euseSubscription example\u003c/h1\u003e\n      \u003cbutton onClick={stop}\u003eStop subscription\u003c/button\u003e\n      \u003ch2\u003eError: {error}\u003c/h2\u003e\n      \u003ch2\u003eData:\u003c/h2\u003e\n      \u003cpre\u003e{JSON.stringify(data, null, 4)}\u003c/pre\u003e\n    \u003c\u003e\n  );\n};\n```\n\n### useLazySubscription\n\nWhen you use only \u003cb\u003eone socket\u003c/b\u003e, passing the socket name is optional.\n\n```tsx\nimport React from 'react';\nimport { useLazySubscription } from 'react-awesome-websocket';\n\ntype Req = {\n  get_user: {\n    id: number\n  }\n}\n\ntype DRes = {\n  get_user: {\n    username: string\n    avatarUrl: string\n  }\n}\n\nconst Component = () =\u003e {\n  const [{ data, error }, { start, stop }] = useLazySubscription\u003cDRes\u003e('user_update');\n\n  return (\n    \u003c\u003e\n      \u003ch1\u003euseLazySubscription example\u003c/h1\u003e\n      \u003cbutton onClick={start}\u003eStart subscription\u003c/button\u003e\n      \u003cbutton onClick={stop}\u003eStop subscription\u003c/button\u003e\n      \u003ch2\u003eError: {error}\u003c/h2\u003e\n      \u003ch2\u003eData:\u003c/h2\u003e\n      \u003cpre\u003e{JSON.stringify(data, null, 4)}\u003c/pre\u003e\n    \u003c\u003e\n  );\n};\n```\n\nWhen you use \u003cb\u003emultiple sockets\u003c/b\u003e, passing the socket name is required. Otherwise, you get the\n`The \"name\" is required for the hook usage` error.\n\n```tsx\nimport React from 'react';\nimport { useLazySubscription } from 'react-awesome-websocket';\n\nenum Socket {\n  MAIN = 'Main'\n}\n\ntype Req = {\n  get_user: {\n    id: number\n  }\n}\n\ntype DRes = {\n  get_user: {\n    username: string\n    avatarUrl: string\n  }\n}\n\nconst Component = () =\u003e {\n  const [{ data, error }, { start, stop }] = useLazySubscription\u003cDRes, Socket\u003e('user_update', {\n    name: Socket.MAIN\n  });\n\n  return (\n    \u003c\u003e\n      \u003ch1\u003euseLazySubscription example\u003c/h1\u003e\n      \u003cbutton onClick={start}\u003eStart subscription\u003c/button\u003e\n      \u003cbutton onClick={stop}\u003eStop subscription\u003c/button\u003e\n      \u003ch2\u003eError: {error}\u003c/h2\u003e\n      \u003ch2\u003eData:\u003c/h2\u003e\n      \u003cpre\u003e{JSON.stringify(data, null, 4)}\u003c/pre\u003e\n    \u003c\u003e\n  );\n};\n```\n\n---\n\n## Provider options declaration\n\n```ts\nimport { WebSocketOptions } from 'react-awesome-websocket';\n\nenum Scoket {\n  MAIN = 'Main'\n};\n\ntype ScoketReq = {\n  method: string\n  data: Record\u003cstring, unknown\u003e\n};\n\ntype SocketRes = {\n  [method: string]: Record\u003cstring, unknown\u003e\n};\n\ntype ScoketSerializedReq = {\n  [method: string]: Record\u003cstring, unknown\u003e\n};\n\ntype SocketDeserializedRes = Record\u003cstring, unknown\u003e;\n\ntype SocketError = {\n  message: string\n  meta: {}\n};\n\nconst options: WebSocketOptions\u003c\n  ScoketReq,\n  SocketRes,\n  Scoket,\n  SocketError,\n  ScoketSerializedReq,\n  SocketDeserializedRes\n\u003e = {\n  [Socket.MAIN]: {\n    url: 'ws://localhost:3000',\n    getRequestIndicator: req =\u003e req.method,\n    getResponseIndicator: res =\u003e Object.keys(res)[0],\n    getError: res =\u003e res[Object.keys(res)[0]].error_msg || null,\n\n    // serialize: (req: ScoketReq) =\u003e ScoketSerializedReq\n    serialize: ({ method, data }) =\u003e ({ [method]: data }),\n\n    // deserialize: (res: SocketRes) =\u003e SocketDeserializedRes\n    deserialize: (res: SocketRes) =\u003e res[Object.keys(res)[0]]\n  }\n};\n```\n\n### Passing own types to WebSocketOptions type\n\n`WebSocketOptions` is a generic type.\n\n```ts\nWebSocketOptions\u003cReq, Res, N extends string = stirng, Err = string, SReq = Req, DRes = Res\u003e\n```\n\n`Req` - type of the socket request (required).\n\n`Res` - type of the socket response (required).\n\n`N` (default is `string`) - type of the sockets' names.\u003cbr/\u003e\n**This type should be passed into every hook if you need to use multiple sockets.**\n\n`Err` (default is `string`) - type of the socket error which is reachable by using hooks as` error` (not required).\n\n`SReq` (default is `Req`) - type of serialized socket request which will be sent to the API (not required).\u003cbr\u003e\n**This type should be returned from the `WebSocketOptions.serialize` function.**\n\n`DRes` (default is `Res`) - type of deserialized socket response which is reachable by using hooks as `data` (not required).\u003cbr\u003e\n**This type should be returned from the `WebSocketOptions.deserialize` function.**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxzinchenko%2Freact-use-socket","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaxzinchenko%2Freact-use-socket","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxzinchenko%2Freact-use-socket/lists"}