# @react-hooke/rxjs

> Manage react state as observed by rxjs structures

Latest version **0.1.1** (published 2022-01-20) · ISC license · 0 weekly downloads

## Install

```sh
npm install @react-hooke/rxjs
pnpm add @react-hooke/rxjs
yarn add @react-hooke/rxjs
bun add @react-hooke/rxjs
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2022-01-20 |
| First published | 2022-01-10 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 3.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Marco Toniut |
| Maintainers | marco.toniut |
| Keywords | react, hooks, rxjs, frp, reactive |

## Links

- npm: https://www.npmjs.com/package/@react-hooke/rxjs
- Repository: https://github.com/marcotoniut/react-hooke
- Homepage: https://github.com/marcotoniut/react-hooke#readme
- Issues: https://github.com/marcotoniut/react-hooke/issues
- npm.io page: https://npm.io/package/@react-hooke/rxjs

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.1 (latest) — 2022-01-20
- 0.1.0 — 2022-01-10

## README

# `@react-hooke/rxjs`

## Recipes

### `useObservableState`

#### Usage

```tsx
import { useConst, useDependent } from "@react-hooke/react";
import { useObservableState } from "@react-hooke/rxjs";
import { useEffect } from "react";
import { Subject } from "rxjs";
import * as RX from "rxjs/operators";

function C(): JSX.Element {
  const $ = useConst(() => new Subject());

  useEffect(() => {
    setInterval(() => $.next(), 1000);
  }, [$]);

  const counter$ = useDependent(
    () => $.pipe(RX.reduce((acc) => acc + 1, 0)),
    [$]
  );
  const counter = useObservableState(counter$, () => 0);

  return <>{counter}</>;
}
```

#### Merging observables

```tsx
import { useDependent } from "@react-hooke/react";
import { useObservableState } from "@react-hooke/rxjs";
import { merge, Observable } from "rxjs";

function C({
  $1,
  $2,
}: {
  $1: Observable<number>;
  $2: Observable<number>;
}): JSX.Element {
  const merged$ = useDependent(() => merge($1, $2), [$1, $2]);
  const merged = useObservableState(merged$, () => 0);

  return <>{merged}</>;
}
```

---

### `useBehaviorState`

#### Usage

```tsx
import { useConst } from "@react-hooke/react";
import { useBehaviorState } from "@react-hooke/rxjs";
import { useEffect } from "react";
import { BehaviorSubject } from "rxjs";

function C(): JSX.Element {
  const counter$ = useConst(() => new BehaviorSubject<number>(0));
  const counter = useBehaviorState(counter$);

  useEffect(() => {
    setInterval(() => counter$.next(counter$.value + 1), 1000);
  }, [counter$]);

  return <>{counter}</>;
}
```

---
_Source: https://npm.io/package/@react-hooke/rxjs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._