subscribable-things

subscribable-things

A collection of reactive wrappers for various browser APIs.

This package provides factory functions which can be used to turn browser APIs into subscribable things. A subscribable thing can either be consumed directly with callback functions or by utilzing one of the popular libraries for reactive programming.

Usage

The subscribable-things package is published on npm and can be installed as usual.

npm install subscribable-things

It exports individual functions for each wrapped browser API which are described in greater detail below. They can either be used directly by providing a callback function ...

import { mediaQueryMatch } from 'subscribable-things';

const subscribe = mediaQueryMatch('(max-width:600px)');

const unsubscribe = subscribe((isMatching) => console.log(isMatching));

unsubscribe();

... or by utilizing a library for reactive programming like RxJS ...

import { from } from 'rxjs';
import { mediaQueryMatch } from 'subscribable-things';

const mediaQueryMatch$ = from(mediaQueryMatch('(max-width:600px)'));

const subscription = mediaQueryMatch$.subscribe((isMatching) => console.log(isMatching));

subscription.unsubscribe();

... or Callbags ...

import fromObs from 'callbag-from-obs';
import observe from 'callbag-observe';
import { mediaQueryMatch } from 'subscribable-things';

const source = fromObs(mediaQueryMatch('(max-width:600px)'));

observe((isMatching) => console.log(isMatching))(source);

... or XStream ...

import { mediaQueryMatch } from 'subscribable-things';
import { fromObservable } from 'xstream';

const stream = fromObservable(mediaQueryMatch('(max-width:600px)'));

const unsubscribe = stream.subscribe((isMatching) => console.log(isMatching));

unsubscribe();

... or Bacon.js ...

import { fromESObservable } from 'baconjs';
import { mediaQueryMatch } from 'subscribable-things';

const eventStream = fromESObservable(mediaQueryMatch('(max-width:600px)'));

const unsubscribe = eventStream.onValue((isMatching) => console.log(isMatching));

unsubscribe();

... or Kefir.js.

import { fromESObservable } from 'kefir';
import { mediaQueryMatch } from 'subscribable-things';

const stream = fromESObservable(mediaQueryMatch('(max-width:600px)'));

const subscription = stream.observe({ value (isMatching) { console.log(isMatching); } });

subscription.unsubscribe();

mediaQueryMatch(mediaQueryString: string): SubscribableThing<boolean>

This function is a wrapper for the matchMedia() method.

mutations(htmlElement: HTMLElement, options: MutationObserverInit): SubscribableThing<MutationRecord[]>

This function is a wrapper for the MutationObserver.

permissionState(permissionDescriptor: PermissionDescriptor): SubscribableThing<PermissionState>

This function is a wrapper for the query() method of the Permissions API.

reports(options: IReportingObserverOptions): SubscribableThing<IReport[]>

This function is a wrapper for the ReportingObserver of the Reporting API.