RxJS Primitives - Operators for RxJS for strings, numbers and booleans
Tags: rxjs, typescript, javascript, showdev
Published: 2020-04-23 11:16:20

---
title: RxJS Primitives - Operators for RxJS for strings, numbers and booleans
published: true
description: A new set of RxJS operators that provide some useful features
tags: rxjs,typescript,javascript,showdev
canonical_url: https://tane.dev/2020/04/rxjs-primitives-operators-for-mutating-and-filtering-primitives/
---

Today I've published a new set of libraries to NPM - [RxJS Primitives](https://github.com/tanepiper/rxjs-primitives).

These are based on some operators I've collected over the last year, and some additional ones I've started adding.
Most are based around ECMASCript objects such as `String`, `Number` and `Boolean` but also includes some useful
utility operators.

Over the coming weeks I'll add more operators, both based on ECMAScript methods and custom functions that I have found useful.

The following modules are on NPM:

## rxjs-string

[@tinynodes/rxjs-string](https://www.npmjs.com/package/@tinynodes/rxjs-string) operators that are built around the `String` object in ECMAScript, for example with `toUpperCase`:

```ts
from(['hello', 'world']).pipe(
  toUpperCase()
).subscribe(value => console.log(value)) // ['HELLO', 'WORLD']
```

There are also some boolean value operators such as `endsWith` and extraction operators like `charAt`, with plans
to add more useful utilities.  For example `endWith` returns a boolean value, but I also want to include an `endsWith`
that returns the original value instead (like `filter`).

## rxjs-number

[@tinynodes/rxjs-number](https://www.npmjs.com/package/@tinynodes/rxjs-number) operators that are built around the `Number` object in ECMAScript, for example `parseFloat`/`parseInt` and `isNaN`.

```ts
from(['1', '1.2', '3.14']).pipe(parseInt()).subscribe(value => console.log(value)) // [1, 2, 3]
```

This also includes `toString` which uses [Number.prototype.toLocaleString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString) supports formatting such as currency.

## rxjs-boolean

[@tinynodes/rxjs-boolean](https://www.npmjs.com/package/@tinynodes/rxjs-boolean) operators that are built around the `Boolean` object in ECMAScript,
and are designed to help with filtering content from observables.  Currently, there are two operators `firstTruthy` and `filterTruthy`.

In both cases these return the underlying value only if it's a truthy value in JavaScript, in the case of `firstTruthy` it only returns
the first value, while `filterTruthy` returns all truthy values.

## rxjs-utility

[@tinynodes/rxjs-utility](https://www.npmjs.com/package/@tinynodes/rxjs-utility) is a custom module that provides some additional operators
that don't fit into the other packages but still have some usefulness.

Currently, there are two operators:

* `startWithTap` - Will fire a callback method only on the first emission from an Observable

```ts
form.valueChanges.pipe(
  startWithTap(() => form.touch()),
).subscribe()
```

* `debounceWithQuery` - Debounces an input such as a text input and passes it to a method that returns a value from a query (such as a search)

```ts
searchField.valueChange.pipe(
  debounceWithQuery(1000, (search) => http.get(`/search?query=${search}`))
).subscribe()
```