React hooks for RxJS
npm install rxjs-hooks- Installation
- Demo
- Apis
1. useObservable
2. useEventCallback
Using npm:
``
$ npm i --save rxjs-hooks rxjs
Or yarn:
`
$ yarn add rxjs-hooks rxjs
`javascript
import React from "react";
import ReactDOM from "react-dom";
import { useObservable } from "rxjs-hooks";
import { interval } from "rxjs";
import { map } from "rxjs/operators";
function App() {
const value = useObservable(() => interval(500).pipe(map((val) => val * 3)));
return (
javascript
import React from "react";
import ReactDOM from "react-dom";
import { useEventCallback } from "rxjs-hooks";
import { map } from "rxjs/operators";function App() {
const [clickCallback, [description, x, y]] = useEventCallback((event$) =>
event$.pipe(
map((event) => [event.target.innerHTML, event.clientX, event.clientY]),
),
["nothing", 0, 0],
)
return (
click position: {x}, {y}
"{description}" was clicked.
);
}
`Apis
$3
tsx
export type InputFactory = (state$: Observable) => Observable
export type InputFactoryWithInputs = (
state$: Observable,
inputs$: Observable>,
) => Observableexport function useObservable(inputFactory: InputFactory): State | null
export function useObservable(inputFactory: InputFactory, initialState: State): State
export function useObservable(
inputFactory: InputFactoryWithInputs,
initialState: State,
inputs: RestrictArray,
): State
`#### Examples:
tsx
import React from 'react'
import ReactDOM from 'react-dom'
import { useObservable } from 'rxjs-hooks'
import { of } from 'rxjs'function App() {
const value = useObservable(() => of(1000))
return (
// render twice
// null and 1000
{value}
)
}ReactDOM.render(
`With default value:
tsx
import React from 'react'
import ReactDOM from 'react-dom'
import { useObservable } from 'rxjs-hooks'
import { of } from 'rxjs'function App() {
const value = useObservable(() => of(1000), 200)
return (
// render twice
// 200 and 1000
{value}
)
}ReactDOM.render(
`Observe props change:
tsx
import React from 'react'
import ReactDOM from 'react-dom'
import { useObservable } from 'rxjs-hooks'
import { of } from 'rxjs'
import { map } from 'rxjs/operators'function App(props: { foo: number }) {
const value = useObservable((_, inputs$) => inputs$.pipe(
map(([val]) => val + 1),
), 200, [props.foo])
return (
// render three times
// 200 and 1001 and 2001
{value}
)
}ReactDOM.render(
ReactDOM.render(
`useObservable with state$
tsx
import React from 'react'
import ReactDOM from 'react-dom'
import { useObservable } from 'rxjs-hooks'
import { interval } from 'rxjs'
import { map, withLatestFrom } from 'rxjs/operators'function App() {
const value = useObservable((state$) => interval(1000).pipe(
withLatestFrom(state$),
map(([_num, state]) => state * state),
), 2)
return (
// 2
// 4
// 16
// 256
// ...
{value}
)
}ReactDOM.render(
`$3
#### Examples:
tsx
import React from 'react'
import ReactDOM from 'react-dom'
import { useEventCallback } from 'rxjs-hooks'
import { mapTo } from 'rxjs/operators'function App() {
const [clickCallback, value] = useEventCallback((event$: Observable>) =>
event$.pipe(
mapTo(1000)
)
)
return (
// render null
// click button
// render 1000
<>
{value}
)
}
ReactDOM.render(
`With initial value:
tsx
import React from 'react'
import ReactDOM from 'react-dom'
import { useEventCallback } from 'rxjs-hooks'
import { mapTo } from 'rxjs/operators'function App() {
const [clickCallback, value] = useEventCallback((event$: Observable>) =>
event$.pipe(
mapTo(1000)
),
200,
)
return (
// render 200
// click button
// render 1000
<>
{value}
)
}
ReactDOM.render(
`With state$:
tsx
import React from "react";
import ReactDOM from "react-dom";
import { useEventCallback } from "rxjs-hooks";
import { map, withLatestFrom } from "rxjs/operators";function App() {
const [clickCallback, [description, x, y, prevDescription]] = useEventCallback(
(event$, state$) =>
event$.pipe(
withLatestFrom(state$),
map(([event, state]) => [
event.target.innerHTML,
event.clientX,
event.clientY,
state[0],
])
),
["nothing", 0, 0, "nothing"]
);
return (
click position: {x}, {y}
"{description}" was clicked.
"{prevDescription}" was clicked previously.
);
}const rootElement = document.getElementById("root");
ReactDOM.render(
`A complex example: useEventCallback with both
and state$tsx
import React, { useState } from "react";
import ReactDOM from "react-dom";
import { useEventCallback } from "rxjs-hooks";
import { map, withLatestFrom, combineLatest } from "rxjs/operators";import "./styles.css";
function App() {
const [count, setCount] = useState(0);
const [clickCallback, [description, x, y, prevDesc]] = useEventCallback(
(event$, state$, inputs$) =>
event$.pipe(
map(event => [event.target.innerHTML, event.clientX, event.clientY]),
combineLatest(inputs$),
withLatestFrom(state$),
map(([eventAndInput, state]) => {
const [[text, x, y], [count]] = eventAndInput;
const prevDescription = state[0];
return [text, x + count, y + count, prevDescription];
})
),
["nothing", 0, 0, "nothing"],
[count]
);
return (
click position: {x}, {y}
"{description}" was clicked.
"{prevDesc}" was clicked previously.
click buttons above, and then click this +++ button, the position
numbers will grow.
);
}const rootElement = document.getElementById("root");
ReactDOM.render(
`Example of combining callback observables coming from separate elements - animation with start/stop button and rate controllable via slider
tsx
const Animation = ({ frame }) => {
const frames = "|/-\\|/-\\|".split("");
return (
{frames[frame % frames.length]}
);
};
const App = () => {
const defaultRate = 5;
const [running, setRunning] = useState(false);
const [onEvent, frame] = useEventCallback(events$ => {
const running$ = events$.pipe(
filter(e => e.type === "click"),
scan(running => !running, running),
startWith(running),
tap(setRunning)
);
return events$.pipe(
filter(e => e.type === "change"),
map(e => parseInt(e.target.value, 10)),
startWith(defaultRate),
switchMap(i => timer(200, 1000 / i)),
withLatestFrom(running$),
filter(([_, running]) => running),
scan(frame => frame + 1, 0)
);
});
return (
onChange={onEvent}
defaultValue={defaultRate}
min="1"
max="10"
>
);
};
`Known issues
If you are using React 18 + , rxjs-hooks will not work properly. Because in React 18, StrictMode` will force unmount hooks to trigger twice, which will result in unexpected behaviours.