Need help with rxjs-web?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

niklas-wortmann
158 Stars 8 Forks MIT License 42 Commits 5 Opened issues

Description

Observable based Api wrapping Web APIs

Services available

!
?

Need anything else?

Contributors list

# 66,861
TypeScr...
rxjs
HTML
Shell
34 commits
# 619,918
HTML
TypeScr...
3 commits
# 125,117
HTML
angular...
angular...
angular...
2 commits
# 97,543
TypeScr...
es8
bitly
Postgre...
1 commit
RxJS Web Logo

rxjs-web
Observables for the Browser API

NPM Bundlephobia MIT license


This library aims to provide Observable based APIs, that wrap Web APIs.


⚠️ A word of warning:

Some of the Web APIs covered here are experimental, non-standard, and/or not well-supported. If necessary, polyfills need to be provided by the user of this library.

The public API surface of this library can be affected by breaking changes within the experimental API used.

Additionally, the implementation of this library makes use of globalThis which breaks ie <= 11! There is no plan to add support for IE 11 in this library.

📦 Install

rxjs-web
is available via npm:
npm i rxjs-web

N.B.: This library relies on RxJS >= 6 and expects you already have it installed in your project.

🔧 API Reference

General hint: usually promise-based APIs are eager, while Observable-based APIs of this library are lazy (executed/started upon subscription). This design decision was made due to the general specification of RxJS Observables.

fromIntersectionObserver

📖 IntersectionObserver | 🔬 experimental

...

fromMutationObserver

📖 MutationObserver

...

fromPerformanceObserver

📖 PerformanceObserver | 🔬 experimental

...

fromResizeObserver

📖 ResizeObserver | 🔬 experimental

...

fromImport

📖 dynamic import

...

fromMediaListQuery

📖 matchMedia

...

fromNetwork

📖 Network Information API | 🔬 experimental

...

fromPermission

📖 Permission API | 🔬 experimental

...

fromPosition

📖 Geolocation API

...

fromSensor

📖 Sensor APIs | 🔬 experimental

...

speak (Text to Speech)

📖 SpeechSynthesis | 🔬 not well tested

speak
provides handy interface for chaining and aborting synthesis.

Usage

import { speak } from 'rxjs-web';

speak('Hello!').subscribe();

Chained

import { speak } from 'rxjs-web';

concat( speak('Hello, mom!'), speak('How are you?'), speak('I miss you.'), ).subscribe();

Advanced usage

import { of, merge, concat, timer } from 'rxjs';
import { map, takeUntil } from 'rxjs/operators';
import { speak, SpeechSynthesisUtteranceConfig } from 'rxjs-web';

const a: string = 'Hello, mom!';

const b: SpeechSynthesisUtteranceConfig = { text: 'How are you?', lang: 'en-UK', pitch: 1, rate: 1, volume: 1, };

const c = new SpeechSynthesisUtterance('I miss you'); c.rate = 1; c.lang = 'en-US'; c.pitch = 1; c.rate = 1; c.volume = 1;

concat(speak(a), speak(b), speak(c)).subscribe((e: SpeechSynthesisEvent) => { console.log(e.name); console.log(e.type); });

listen (Speech to Text)

📖 SpeechRecognition | 🔬 not well tested

Handy interface for continuous speech recognition.

simple example

import { listen } from 'rxjs-web';

listen({ lang: 'en' }) .subscribe(e => { if (e.type == 'result') { console.log(e.results[0][0].transcript); } });

🛸 Not yet supported APIs

These APIs are not yet supported by this library, and might be included later:

| Name / Link | | ----------------------------------------------------------------------------------------------------------------- | | Vibration API | | Bluetooth API | | File and Directory Entries API | | Image Capture API | | Push API | | Broadcast Channel API |

🤝 Want to contribute to this project?

That will be awesome!

Please create an issue before submitting a PR — we'll be able to discuss it first!

Thanks!

Credits

This project is build upon the typescript library starter. Kudos to @alexjoverm and every contributor of this amazing project!

Many thanks also goes to Sascha for creating this fantastic logo!

Enjoy 🙂

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.