{"library":"react-rx","title":"React-Rx: Hooks and Utilities for RxJS Integration","description":"React-Rx is a library designed to seamlessly integrate RxJS Observables into React applications, providing both React Hooks and higher-order component utilities. It excels at handling Observables that emit values synchronously without incurring an immediate re-render on mount, optimizing performance. The library, currently at stable version 4.2.2, maintains a consistent release cadence with frequent updates for bug fixes and dependency upgrades, often related to React Compiler advancements. It offers full TypeScript support and differentiates itself by providing two distinct yet powerful patterns: a set of `useObservable` hooks for functional components and a `reactiveComponent` utility for a more declarative, component-based approach. Users are encouraged to choose one style rather than mixing them within the same component, as they represent different programming paradigms. It requires `rxjs` version 7 or higher and `react` version 18.3 or 19.0.0-0, ensuring compatibility with modern React ecosystems.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-rx"],"cli":null},"imports":["import { useObservable } from 'react-rx';","import { useObservableCallback } from 'react-rx';","import { reactiveComponent } from 'react-rx';","import { Observable } from 'rxjs';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useMemo } from 'react';\nimport { useObservable } from 'react-rx';\nimport { interval, map, take } from 'rxjs';\n\ninterface CounterProps {\n  startAt: number;\n  intervalMs: number;\n}\n\nfunction ObservableCounter({ startAt, intervalMs }: CounterProps) {\n  const counterObservable = useMemo(\n    () => interval(intervalMs).pipe(\n      map(i => startAt + i),\n      take(10) // Stop after 10 emissions to prevent infinite updates\n    ),\n    [startAt, intervalMs]\n  );\n\n  const count = useObservable(counterObservable, startAt); // Initial value\n\n  return (\n    <div>\n      <h2>Observable Counter</h2>\n      <p>Current count: {count}</p>\n      <p>Will count from {startAt} every {intervalMs}ms for 10 times.</p>\n    </div>\n  );\n}\n\nexport default function App() {\n  return (\n    <div>\n      <h1>React-Rx Demonstration</h1>\n      <ObservableCounter startAt={0} intervalMs={1000} />\n      <ObservableCounter startAt={100} intervalMs={500} />\n    </div>\n  );\n}\n","lang":"typescript","description":"This quickstart demonstrates how to use the `useObservable` hook to subscribe to an RxJS `interval` observable and display its emitted values in a React functional component. It showcases two independent counters.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}