{ "id": "780a1668f9f43ddb48fb4b8a24ce726390b6aef39a38f83da59374f01740183a", "pubkey": "266815e0c9210dfa324c6cba3573b14bee49da4209a9456f9484e5106cd408a5", "created_at": 1761762928, "kind": 1337, "tags": [ [ "l", "typescript" ], [ "name", "use-observable.ts" ], [ "extension", "ts" ], [ "description", "A simple react hook to use an RxJS observable inside a component" ], [ "license", "MIT" ], [ "t", "react" ], [ "t", "rxjs" ], [ "dep", "react" ], [ "dep", "rxjs" ] ], "content": "import { useEffect, useMemo, useRef, useState } from \"react\";\nimport { BehaviorSubject, Observable } from \"rxjs\";\n\n/** Hook to subscribe to an RxJS Observable and get its current value */\nexport function useObservable\u003cT\u003e(observable: BehaviorSubject\u003cT\u003e): T;\nexport function useObservable\u003cT\u003e(observable: Observable\u003cT\u003e): T | undefined;\nexport function useObservable\u003cT\u003e(observable: Observable\u003cT\u003e): T | undefined {\n const sync = useRef\u003cT\u003e(Reflect.get(observable, \"value\"));\n\n // Keep value state to trigger re-renders\n const [_, setValue] = useState\u003cT\u003e(Reflect.get(observable, \"value\"));\n\n useEffect(() =\u003e {\n const sub = observable.subscribe((v) =\u003e {\n // Set ref so that sync values are supported\n sync.current = v;\n setValue(v);\n });\n\n return () =\u003e sub.unsubscribe();\n }, [observable]);\n\n return sync.current;\n}\n\n/** Subscribe to an observable with a creator function and dependencies */\nexport function useObservableMemo\u003cT\u003e(\n project: () =\u003e Observable\u003cT\u003e,\n deps: any[],\n): T | undefined {\n const observable = useMemo(() =\u003e project(), deps);\n return useObservable(observable);\n}\n", "sig": "264d7c566406e6306f7387d79e997fd06ddba7190f544fb92f517050dfd11ff03ccfc0bb66bfe52cf8d578ee0d1872346a4d7bbdba856749720ef48a900ec604" }