DEV Community


RxJS Ninja - New Operators for working with StreamsAPI

tanepiper profile image Tane Piper Originally published at ・2 min read

Since the last update on RxJS Ninja there have been a few new operators added, below are some details and links to StackBlitz demos showing them in action.

Numbers and Math operators

In @rxjs-ninja/rxjs-number the missing toFixed operator has been added, alongside a new custom toHex operator and the corresponding parseHex one allowing hex numbers to be worked with (such as converting colours).

There are also new operators for some basic math - add, sub, div, mul, mod and pow all allowing you to modify source numbers, all accept a number, or an Observable number source.

Working with Browser Streams

Some new operators have been added to @rxjs-ninja/rxjs-utility that allow interoperability between RxJSand the StreamsAPI. These APIs are not in all browsers but there is an available polyfill.


This operator accepts a ReadableStream and provides the emitted values as an Observable, allowing you to use RxJS operators to work with the data.

  • Demo - Using fetch body with fromReadableStream to show partial images
  • Demo - A basic infinite number stream that ticks per second


This operator accepts a WritableStream.The operator emits the source value and also writes to the stream. The operator takes care of closing the writer when the Observable subscription is closed.

  • Demo - Streams an Observable interval value into a WritableStream with optional ability to stop the writer without ending the Observable subscription.


This operator uses fetch to do an HTTP request, instead of the body response it emits either a number which is the current progress, or a Uint8Array containing the final
response from the body.

  • Demo Fetches an image and shows a progress bar with the current percentage and once complete shows the image.

Discussion (0)

Editor guide