{"id":21399272,"url":"https://github.com/streamr-dev/streamr-client-react","last_synced_at":"2025-07-13T20:33:25.662Z","repository":{"id":43681135,"uuid":"300671751","full_name":"streamr-dev/streamr-client-react","owner":"streamr-dev","description":"React toolkit for Streamr.","archived":false,"fork":false,"pushed_at":"2024-08-03T17:15:00.000Z","size":2823,"stargazers_count":11,"open_issues_count":0,"forks_count":2,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-11-11T03:46:17.488Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/streamr-dev.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}},"created_at":"2020-10-02T16:19:03.000Z","updated_at":"2023-12-14T19:40:22.000Z","dependencies_parsed_at":"2024-03-27T17:43:59.005Z","dependency_job_id":null,"html_url":"https://github.com/streamr-dev/streamr-client-react","commit_stats":{"total_commits":85,"total_committers":5,"mean_commits":17.0,"dds":0.3529411764705882,"last_synced_commit":"2c98f651be5406c04a7ffc3bdb0ebe625683c634"},"previous_names":[],"tags_count":45,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/streamr-dev%2Fstreamr-client-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/streamr-dev%2Fstreamr-client-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/streamr-dev%2Fstreamr-client-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/streamr-dev%2Fstreamr-client-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/streamr-dev","download_url":"https://codeload.github.com/streamr-dev/streamr-client-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225917082,"owners_count":17544831,"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","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-11-22T15:13:57.269Z","updated_at":"2025-07-13T20:33:25.650Z","avatar_url":"https://github.com/streamr-dev.png","language":"TypeScript","readme":"# Streamr-client-react ✨\n\nReact hooks and components for [`@streamr/sdk`](https://github.com/streamr-dev/network/tree/main/packages/client).\n\n## Installation\n\nUsing `npm`, install the library, and save it to your `package.json` dependencies.\n\n```\nnpm i streamr-client-react\n```\n\nThe library relies on a collection of peer dependencies:\n\n```\nprocess ^0.11.10\nreact \u003e=16.8.0\nreact-fast-compare ^3.2.0\n@streamr/sdk \u003e= 102.0.0\n```\n\nMake sure you install them, too!\n\n## API\n\n### Components\n\n#### `Provider`\n\nIt holds its own `StreamrClient` instance and – by utilizing the [Context API](https://reactjs.org/docs/context.html) – makes it available to all its children components.\n\n```typescript\nimport Provider from 'streamr-client-react'\n\nfunction App() {\n    return \u003cProvider {...options}\u003eYou can use `useClient` here!\u003c/Provider\u003e\n}\n```\n\n---\n\n#### `ClientContext`\n\nIf you wanna hack your way around the `useClient` hook for some wholesome reason and directly access the client instance provided by the `Provider` component this is where you start.\n\n```typescript\nimport { useContext } from 'react'\nimport type { StreamrClient } from '@streamr/sdk'\nimport { ClientContext } from 'streamr-client-react'\n\nfunction SqrtOfFoo() {\n    const client: undefined | StreamrClient = useContext(ClientContext)\n\n    return null\n}\n```\n\n### Hooks\n\n#### `useClient(config?: StreamrClientConfig)`\n\n```tsx\nimport { useClient } from 'streamr-client-react'\n```\n\nIf `config` is given, `useClient` gives you a new instance of the client. The hook uses [`react-fast-compare`](https://github.com/FormidableLabs/react-fast-compare) to avoid unreasonable creation of new instances.\n\nIf `config` is skipped, it's gonna return an instance provided by the `Provider` component (`undefined` by default).\n\nSee [Config.ts](https://github.com/streamr-dev/network/blob/main/packages/client/src/Config.ts) for more details on `StreamrClientConfig`.\n\n---\n\n#### `useSubscribe(streamId: string, options?: Options)`\n\n```tsx\nimport { useSubscribe } from 'streamr-client-react'\n```\n\nIt allows you to conveniently subscribe to streams.\n\n```typescript\nimport type { ResendOptions, StreamMessage } from '@streamr/sdk'\n\ninterface Options {\n    // Changing `cacheKey` will drop the old subscription and start a new one.\n    cacheKey?: number | string\n    // Set `disabled` to true to make it idle, or to make it drop the previous subscription\n    // and then idle.\n    disabled?: boolean\n    // You can either skip undecoded messages (true), or treat them as other messages (false), and\n    // handle their undecoded content on your own. Useful when you have to show \"something\".\n    // Default: false\n    ignoreUndecodedMessages?: boolean\n    // A callback triggered after you're done with a subscription and with processing messages.\n    onAfterFinish?: () =\u003e void\n    // A callback triggered before subscribing.\n    onBeforeStart?: () =\u003e void\n    // A callback triggered when the client fails at subscribing.\n    onError?: (e: any) =\u003e void\n    // *The* on-message callback.\n    onMessage?: (msg: StreamMessage) =\u003e void\n    // A callback triggered when the client fails to decode a massage.\n    onMessageError?: (e: any) =\u003e void\n    // Resend instructions. `undefined` by default (= don't resend anything).\n    resendOptions?: ResendOptions\n}\n```\n\n`onAfterFinish`, `onBeforeStart`, `onError`, `onMessage`, and `onMessageError` are all kept as refs (see [`useRef`](https://reactjs.org/docs/hooks-reference.html#useref)) internally, and for that reason changing them does not trigger resubscribing. Additionally, we track changes to `resendOptions` using [`react-fast-compare`](https://github.com/FormidableLabs/react-fast-compare) to avoid excessive resubscribing.\n\nSee\n\n-   [`client/src/subscribe/Resends.ts`](https://github.com/streamr-dev/network/blob/main/packages/client/src/subscribe/Resends.ts) for more details on `ResendOptions`.\n\n---\n\n#### `useResend(streamId: string, resendOptions: ResendOptions, options?: Options)`\n\n```tsx\nimport { useResend } from 'streamr-client-react'\n```\n\nIt allows you to resend historical messages without subscribing to the real-time messages.\n\n```typescript\nimport type { ResendOptions, Message } from '@streamr/sdk'\n\ninterface Options {\n    // Changing `cacheKey` will drop the old subscription and start a new one.\n    cacheKey?: number | string\n    // Set `disabled` to true to make it idle, or to make it drop the previous subscription\n    // and then idle.\n    disabled?: boolean\n    // You can either skip undecoded messages (true), or treat them as other messages (false), and\n    // handle their undecoded content on your own. Useful when you have to show \"something\".\n    // Default is false.\n    ignoreUndecodedMessages?: boolean\n    // A callback triggered after you're done with a subscription and with processing messages.\n    onAfterFinish?: () =\u003e void\n    // A callback triggered before subscribing.\n    onBeforeStart?: () =\u003e void\n    // A callback triggered when the client fails at subscribing.\n    onError?: (e: any) =\u003e void\n    // *The* on-message callback.\n    onMessage?: (msg: Message) =\u003e void\n    // A callback triggered when the client fails to decode a massage.\n    onMessageError?: (e: any) =\u003e void\n}\n```\n\nSee\n\n-   [`client/src/subscribe/Resends.ts`](https://github.com/streamr-dev/network/blob/main/packages/client/src/subscribe/Resends.ts) for more details on `ResendOptions`.\n-   [`client/src/Message.ts`](https://github.com/streamr-dev/network/blob/main/packages/client/src/Message.ts) for more details on `Message`.\n\n### Utils\n\n#### `subscribe(streamId: string, client: StreamrClient, options?: Options)`\n\n```tsx\nimport { subscribe } from 'streamr-client-react'\n```\n\nSubscribes to a stream and returns an object with 2 asynchrounous methods: `next` and `abort`. Example:\n\n```typescript\nasync function foo(streamId: string, client: StreamrClient) {\n    const queue = subscribe(streamId, client)\n\n    while (true) {\n        const { value: msg, done } = await queue.next()\n\n        if (msg) {\n            // Do something with a message here.\n        }\n\n        if (done) {\n            break\n        }\n    }\n\n    // Use `queue.abort()` to unsubscribe.\n}\n```\n\nAvailable options:\n\n```typescript\ninterface Options {\n    // You can either skip undecoded messages (true), or treat them as other messages (false), and\n    // handle their undecoded content on your own. Useful when you have to show \"something\".\n    // Default is false.\n    ignoreUndecodedMessages?: boolean\n    // A callback triggered when the client fails at subscribing.\n    onError?: (e: any) =\u003e void\n    // Resend instructions. `undefined` by default (= don't resend anything).\n    onMessageError?: (e: any) =\u003e void\n}\n```\n\n---\n\n#### `resend(streamId: string, resendOptions: ResendOptions, streamrClient: StreamrClient, options?: Options)`\n\n```tsx\nimport { resend } from 'streamr-client-react'\n```\n\nSubscribes to a stream of historical messages (only) and returns an object with 2 asynchrounous methods: `next` and `abort`. Example:\n\n```typescript\nasync function foo(streamId: string, client: StreamrClient) {\n    const queue = resend(streamId, { last: 10 }, client)\n\n    while (true) {\n        const { value: msg, done } = await queue.next()\n\n        if (msg) {\n            // Do something with a message here.\n        }\n\n        if (done) {\n            break\n        }\n    }\n\n    // Use `queue.abort()` to ignore further data.\n}\n```\n\n`subscribe` and `resend` share the options.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstreamr-dev%2Fstreamr-client-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstreamr-dev%2Fstreamr-client-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstreamr-dev%2Fstreamr-client-react/lists"}