react-props-stream is a utility library designed to bridge RxJS reactive streams with React components. It offers three primary mechanisms: `withPropsStream` (a Higher-Order Component), `streamingComponent` (a functional component constructor), and `WithObservable` (a render prop component), all enabling the declaration of component props or children based on Observable streams. The current stable version is 1.0.1, which introduced updates for TypeScript 4 and ES Module exports. While not frequently updated, it provides a stable and specialized approach for managing complex, asynchronous component logic using RxJS operators. Its key differentiation lies in providing a declarative, stream-based API for React, conceptually similar to patterns found in `recompose` but with a direct and focused integration with the RxJS ecosystem. It allows for efficient handling of data fetching, derived state, and animated values without relying solely on React's internal state management for all asynchronous operations.
npm install react-props-streamVerified import paths — ran on the pinned version, not inferred.
Demonstrates `withPropsStream` to create a component whose props (an ever-increasing counter) are driven by an RxJS `timer` observable, updating every second.
Migrate your project to use ES Modules, or if absolutely necessary, use dynamic `import()` for `react-props-stream` to load it asynchronously in a CJS context.
Ensure `recompose` is explicitly installed in your project if still needed. Review your `react-props-stream` usage for any assumptions based on `recompose`'s presence or API.
Adhere strictly to `rxjs@^6` for full compatibility. If using newer RxJS versions, carefully review their migration guides and adapt your RxJS code accordingly.
Ensure your project is using React 16 or a newer version (e.g., React 17 or 18).
Verify that `rxjs@^6` is installed and that imports follow the RxJS v6 pattern: `import { timer } from 'rxjs'` for creation functions and `import { map } from 'rxjs/operators'` for operators.Configure your project to use ES Modules (e.g., set `"type": "module"` in `package.json`) or switch to ES Module import syntax: `import { withPropsStream } from 'react-props-stream'`.Ensure the argument provided as the `BaseComponent` to `withPropsStream` or the component returned by `streamingComponent`'s observable is a valid React functional or class component.
Ensure the render prop function of `WithObservable` explicitly extracts and renders a valid React child (e.g., a string, number, or React element) from the observable's emission: `<WithObservable observable={num$} >{({ number }) => <div>{number}</div>}</WithObservable>`.