# @blockquote-web-components/blockquote-controller-rxjs > A modern architecture for building composable and reusable Web Components Latest version **1.5.0** (published 2026-09-26) · MIT license · 0 weekly downloads ## Install ```sh npm install @blockquote-web-components/blockquote-controller-rxjs pnpm add @blockquote-web-components/blockquote-controller-rxjs yarn add @blockquote-web-components/blockquote-controller-rxjs bun add @blockquote-web-components/blockquote-controller-rxjs ``` ## Health **Score 55/100 (C)** — status: active. Positive: no vulnerabilities; recently updated; high maintenance score. Warnings: low downloads; no types; no esm support. ## Facts | | | |---|---| | Version | 1.5.0 | | Published | 2026-09-26 | | First published | 2022-06-11 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 3 | | Author | Blockquote | | Maintainers | oscarmarina | | Keywords | lit, web-component, lit-element | ## Links - npm: https://www.npmjs.com/package/@blockquote-web-components/blockquote-controller-rxjs - Repository: https://github.com/oscarmarina/blockquote-web-components - Homepage: https://github.com/oscarmarina/blockquote-web-components#readme - Issues: https://github.com/oscarmarina/blockquote-web-components/issues - npm.io page: https://npm.io/package/@blockquote-web-components/blockquote-controller-rxjs ## Alternatives - [lodash.assign](https://npm.io/package/lodash.assign.md) — 2.3M weekly downloads - [lodash.chunk](https://npm.io/package/lodash.chunk.md) — 1.8M weekly downloads - [react-native-ios-utilities](https://npm.io/package/react-native-ios-utilities.md) — 138.5K weekly downloads - [@technically/lodash](https://npm.io/package/@technically/lodash.md) — 50.9K weekly downloads - [@fluid-topics/ft-icon](https://npm.io/package/@fluid-topics/ft-icon.md) — 20.6K weekly downloads ## Recent versions - 1.5.0 (latest) — 2026-09-26 - 1.4.36 — 2026-08-15 - 1.4.35 — 2026-07-10 - 1.4.34 — 2026-07-09 - 1.4.33 — 2026-06-13 - 1.4.32 — 2026-05-23 - 1.4.31 — 2026-05-23 - 1.4.30 — 2026-03-15 - 1.4.29 — 2026-03-14 - 1.4.28 — 2026-02-11 - 1.4.27 — 2026-02-08 - 1.4.26 — 2026-01-10 - 1.4.25 — 2025-11-14 - 1.4.24 — 2025-11-02 - 1.4.23 — 2025-09-27 - … 71 more at https://npm.io/package/@blockquote-web-components/blockquote-controller-rxjs/versions ## README # BlockquoteControllerRxjs ![Lit](https://img.shields.io/badge/lit-3.0.0-blue.svg) ### Connect Observables with Lit `BlockquoteControllerRxjs` is a Lit Reactive Controller that subscribes to an [RxJS 9](https://github.com/ReactiveX/rxjs) / Web Platform `Observable` while the host is connected, stores the latest emitted value and requests a host update when it changes. - One controller per stream, the latest value is available (typed) in `value` - It subscribes on `hostConnected` and unsubscribes (`AbortSignal`) on `hostDisconnected`, so it re-subscribes if the element is moved in the DOM - The stream can be replaced at any time by assigning `stream$`; the previous one is unsubscribed - Repeated values (`Object.is`) do not trigger an update - Optional `callback`, `onError` and `onComplete` handlers Original idea by [Adrian Fâciu](https://github.com/adrianfaciu/rx-lit) - [observables-litelement](https://adrianfaciu.dev/posts/observables-litelement/)
### Demo [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/oscarmarina/blockquote-web-components/tree/main/packages/controllers/blockquote-controller-rxjs) ### Usage **`new BlockquoteControllerRxjs(this, {stream$, initialValue?, callback?, onError?, onComplete?})`** ```javascript import {html, LitElement} from 'lit'; import {fromEventPattern} from 'rxjs/from-event-pattern'; import {map} from 'rxjs/map'; import {BlockquoteControllerRxjs} from '@blockquote-web-components/blockquote-controller-rxjs'; const mousemove$ = fromEventPattern( (handler) => window.addEventListener('mousemove', handler), (handler) => window.removeEventListener('mousemove', handler) ); class BlockquoteControllerRxjsDemo extends LitElement { pos = new BlockquoteControllerRxjs(this, { stream$: mousemove$[map](({clientX, clientY}) => ({x: clientX, y: clientY})), initialValue: {x: 0, y: 0}, }); render() { const {x, y} = this.pos.value; return html`

The mouse is at:

x: ${x} y: ${y}
`; } } ``` Use `callback` to copy the value into a reactive property when you need it in `willUpdate` / `updated`: ```javascript new BlockquoteControllerRxjs(this, { stream$, callback: (value) => (this._pos = value), }); ```
### `src/BlockquoteControllerRxjs.ts`: #### class: `BlockquoteControllerRxjs` ##### Fields | Name | Privacy | Type | Default | Description | Inherited From | | ------------ | ------- | --------------------------------------- | -------------- | ------------------------------------------------------------------------- | -------------- | | `host` | | `THost` | | | | | `value` | | `T \| I` | `initialValue` | Latest value emitted by the stream (or \`initialValue\`). | | | `error` | | `unknown` | | Last error emitted by the stream, \`undefined\` otherwise. | | | `completed` | | `boolean` | `false` | \`true\` once the current stream has completed. | | | `callback` | | `(value: T) => void \| undefined` | `callback` | Called with every new (distinct) value emitted by the stream. | | | `onError` | | `(error: unknown) => void \| undefined` | `onError` | Called when the stream errors (falls back to \`globalThis.reportError\`). | | | `onComplete` | | `() => void \| undefined` | `onComplete` | Called when the stream completes. | | | `stream$` | | `ObservableLike` | | The current Observable. Assigning a different one re-subscribes. | | | `subscribed` | | `boolean` | | \`true\` while there is an active subscription. | | ##### Methods | Name | Privacy | Description | Parameters | Return | Inherited From | | ------------------ | ------- | ------------------------------------------------------- | ---------- | ------ | -------------- | | `subscribe` | | Subscribes to \`stream$\`. No-op if already subscribed. | | `void` | | | `unsubscribe` | | Aborts the current subscription, if any. | | `void` | | | `hostConnected` | | | | `void` | | | `hostDisconnected` | | | | `void` | |
Private API ##### Fields | Name | Privacy | Type | Default | Description | Inherited From | | ------------------ | ------- | ------------------------------ | --------- | ----------- | -------------- | | `#stream$` | private | `ObservableLike` | `stream$` | | | | `#abortController` | private | `AbortController \| undefined` | | | | ##### Methods | Name | Privacy | Description | Parameters | Return | Inherited From | | --------- | ------- | ----------- | ---------------------------------- | ------ | -------------- | | `#settle` | private | | `abortController: AbortController` | `void` | |
#### Exports | Kind | Name | Declaration | Module | Package | | ---- | -------------------------- | ------------------------ | ------------------------------- | ------- | | `js` | `BlockquoteControllerRxjs` | BlockquoteControllerRxjs | src/BlockquoteControllerRxjs.ts | | ### `src/index.ts`: #### Exports | Kind | Name | Declaration | Module | Package | | ---- | --------------------------------- | ------------------------------- | ----------------------------- | ------- | | `js` | `BlockquoteControllerRxjs` | BlockquoteControllerRxjs | ./BlockquoteControllerRxjs.js | | | `js` | `BlockquoteControllerRxjsOptions` | BlockquoteControllerRxjsOptions | ./BlockquoteControllerRxjs.js | | | `js` | `ObservableLike` | ObservableLike | ./BlockquoteControllerRxjs.js | | | `js` | `ObserverLike` | ObserverLike | ./BlockquoteControllerRxjs.js | | --- _Source: https://npm.io/package/@blockquote-web-components/blockquote-controller-rxjs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._