{"id":28002,"library":"observable-callback","title":"observable-callback","description":"A small RxJS utility (v1.0.3, stable) that creates a callback function which publishes its argument to an observable stream. It wraps an RxJS Subject and returns a tuple of the subject's observable and its next() function. Also supports an optional operator function to transform the observable. Minimal, no other dependencies besides RxJS 6.x or 7.x. Ideal for converting callback-based APIs (e.g., React event handlers) into observable streams.","status":"active","version":"1.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/bjoerge/observable-callback","tags":["javascript","observable","rxjs","callback","subject","event-handler","typescript"],"install":[{"cmd":"npm install observable-callback","lang":"bash","label":"npm"},{"cmd":"yarn add observable-callback","lang":"bash","label":"yarn"},{"cmd":"pnpm add observable-callback","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Observable and Subject types. Must be installed separately.","package":"rxjs","optional":false}],"imports":[{"note":"Package is ESM-only; named import required. CommonJS require will fail unless using a bundler that handles ESM.","wrong":"const observableCallback = require('observable-callback')","symbol":"observableCallback","correct":"import { observableCallback } from 'observable-callback'"},{"note":"Observable type is not re-exported; must be imported from rxjs.","wrong":"import { Observable } from 'observable-callback'","symbol":"Observable","correct":"import { Observable } from 'rxjs'"},{"note":"OperatorFunction type used in the overloaded signature; import from rxjs.","wrong":"import { OperatorFunction } from 'observable-callback'","symbol":"OperatorFunction","correct":"import { OperatorFunction } from 'rxjs'"}],"quickstart":{"code":"import { observableCallback } from 'observable-callback';\nimport { map } from 'rxjs/operators';\n\n// Basic usage: create callback and observable\nconst [value$, onValue] = observableCallback();\nvalue$.subscribe(value => console.log(value)); // logs 'Hi'\nonValue('Hi');\n\n// With operator: transform stream\nconst [greeting$, onPlanet] = observableCallback(\n  planet$ => planet$.pipe(map(planet => `Hello ${planet}!`))\n);\ngreeting$.subscribe(console.log); // logs 'Hello world!'\nonPlanet('world');\n\n// React example\nimport React from 'react';\nconst [clicks$, onClick] = observableCallback();\nclicks$.subscribe(() => console.log('clicked'));\nconst Button = () => <button onClick={onClick}>Click me</button>;","lang":"typescript","description":"Shows creation of observable-callback, subscription, invoking callback, and usage with operator and in React."},"warnings":[{"fix":"Upgrade to v1.0.2+ or keep rxjs@6.","message":"v1.0.2 added support for rxjs@7 as peer dependency. v1.0.0 only supported rxjs@6.","severity":"breaking","affected_versions":"<1.0.2"},{"fix":"Always call with exactly one argument of the expected type.","message":"The callback function is the Subject's next method; calling it with no argument or multiple arguments may cause unexpected behavior since Subject.next expects a single argument.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"When passing an operator, the returned observable is the transformed one; reference the operator if you need the raw subject.","message":"If the operator function is provided, the first element of the tuple is the observable from operator's result, not the raw subject observable. This may confuse developers expecting the raw subject observable.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-05-09T00:00:00.000Z","next_check":"2026-08-07T00:00:00.000Z","problems":[{"fix":"Run npm install observable-callback. Ensure tsconfig has moduleResolution: 'node' or 'node16' and esModuleInterop true.","cause":"The package may not be installed or TypeScript cannot resolve it due to missing node_modules or incorrect moduleResolution.","error":"Cannot find module 'observable-callback' or its corresponding type declarations."},{"fix":"Use import syntax or configure bundler to handle ESM (e.g., webpack with experiments.outputModule).","cause":"CommonJS require used in a bundler that cannot resolve ESM-only package.","error":"Module not found: Error: Can't resolve 'observable-callback'"},{"fix":"Use named import: import { observableCallback } from 'observable-callback'.","cause":"Incorrect import style: using default import or destructuring from wrong object.","error":"TypeError: observableCallback is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}