RxJS

RxJS documentation

docs

Official RxJS docs for Observables, operators, schedulers, and patterns.

Quickstart (install)

bash
npm i rxjs

Project setup (ESM import)

typescript
import { of } from "rxjs";

of(1, 2, 3).subscribe(console.log);

pipe + operators

typescript
import { fromEvent, map, filter, debounceTime } from "rxjs";

const clicks$ = fromEvent<MouseEvent>(document, "click").pipe(
  debounceTime(250),
  map((e) => ({ x: e.clientX, y: e.clientY })),
  filter((p) => p.x > 0)
);

clicks$.subscribe(console.log);

Subjects (push values)

typescript
import { Subject } from "rxjs";

const s = new Subject<number>();
const sub = s.subscribe((v) => console.log(v));

s.next(1);
s.next(2);
sub.unsubscribe();

HTTP-like (switchMap + catchError)

typescript
import { fromEvent, from, of } from "rxjs";
import { switchMap, catchError } from "rxjs/operators";

const btn = document.querySelector("button#load")!;

fromEvent(btn, "click")
  .pipe(
    switchMap(() =>
      from(fetch("/api/data").then((r) => r.json())).pipe(
        catchError((err) => of({ error: String(err) }))
      )
    )
  )
  .subscribe(console.log);