https://github.com/ngneat/react-rxjs
🔌 "Plug and play" for Observables in React Apps!
https://github.com/ngneat/react-rxjs
react reacthooks rxjs
Last synced: 8 months ago
JSON representation
🔌 "Plug and play" for Observables in React Apps!
- Host: GitHub
- URL: https://github.com/ngneat/react-rxjs
- Owner: ngneat
- Created: 2021-09-22T19:01:05.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-05-03T13:07:56.000Z (over 3 years ago)
- Last Synced: 2025-05-07T18:15:31.707Z (8 months ago)
- Topics: react, reacthooks, rxjs
- Language: TypeScript
- Homepage: https://www.netbasal.com
- Size: 972 KB
- Stars: 36
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
> "Plug and play" for RxJS Observables in React Apps!
[](https://github.com/ngneat/react-rxjs/actions/workflows/ci.yml)
```bash
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.
```tsx
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
{counter}
;
}
```
`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:
```tsx
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.
```ts
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:
```ts
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:
```ts
export function App() {
const [text, setText] = useState('');
const { ref } = useFromEvent>('keyup', (event$) =>
event$.pipe(
debounceTime(400),
distinctUntilChanged(),
tap((event) => setText(event.target.value))
)
);
return (
<>
{ text }
>
)
```