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();
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.