ngneat / react-rxjs

"Plug and play" for RxJS Observables in React Apps!

npm install @ngneat/react-rxjs

useObservable

Ever had an Observable holding data that you need to maintain in the state of your React App? This hook bridges that gap.

It receives an Observable, subscribes to it, and stores the current version in a react state, ensuring that it persists between re-renders.

Note that you can use it multiple times, with various Observables.

import { interval } from 'rxjs';
import { take } from 'rxjs/operators';
import { useObservable } from '@ngneat/react-rxjs';

const interval$ = interval(1000);

function CounterComponent() {
  const [counter] = useObservable(interval$);
  const [counter, { error, completed, subscription }] = useObservable(interval$.pipe(take(3)));

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

useObservable can take the initial value as the second parameter - useObservable(source$, initialValue). If the source fires synchronously immediately (like in a BehaviorSubject), the value will be used as the initial value.

You can also pass a dependencies:

import { useObservable } from '@ngneat/react-rxjs';

const SomeComponent = ({ id }: { id: string }) => {
  const [state] = useObservable(getStream$(id), { deps: [id] })

  return state;
}

useUntilDestroyed

The useUntilDestroyed hook returns an object with two properties:

• untilDestroyed: An operator that unsubscribes from the source when the component is destroyed.

• destroyed - An observable that emits when the component is destroyed.

import { interval } from 'rxjs';
import { useUntilDestroyed } from '@ngneat/react-rxjs';

function CounterComponent() {
  const { untilDestroyed } = useUntilDestroyed();

  useEffect(() => {
    interval(1000).pipe(untilDestroyed()).subscribe(console.log)
  }, [])

  return ...;
}

useEffect$

The useEffect$ hook receives a function that returns an observable, subscribes to it, and unsubscribes when the component destroyed:

import { useEffect$ } from '@ngneat/react-rxjs';

function loadTodos() {
  return fromFetch('todos').pipe(tap({
    next(todos) {
      updateStore(todos);
    }
  }));
}

function TodosComponent() {
  const [todos] = useObservable(todos$);

  useEffect$(() => loadTodos());
  useEffect$(() => loadTodos(), deps);

  return <>{todos}</>;
}

useFromEvent

It's the fromEvent observable, but with hooks:

export function App() {
  const [text, setText] = useState('');

  const { ref } = useFromEvent<ChangeEvent<HTMLInputElement>>('keyup', (event$) =>
    event$.pipe(
      debounceTime(400),
      distinctUntilChanged(),
      tap((event) => setText(event.target.value))
    )
  );

  return (
    <>
     <input ref={ref}>
     { text }
    </>
  )