{"id":11832,"library":"react-props-stream","title":"React Props Stream Utilities","description":"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.","status":"active","version":"1.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/sanity-io/react-props-stream","tags":["javascript","typescript"],"install":[{"cmd":"npm install react-props-stream","lang":"bash","label":"npm"},{"cmd":"yarn add react-props-stream","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-props-stream","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core reactive programming library for streams.","package":"rxjs","optional":false},{"reason":"Required for building user interfaces.","package":"react","optional":false}],"imports":[{"note":"ESM-only since v1.0.1. `withPropsStream` is a Higher-Order Component to connect an Observable to component props.","wrong":"const { withPropsStream } = require('react-props-stream')","symbol":"withPropsStream","correct":"import { withPropsStream } from 'react-props-stream'"},{"note":"ESM-only since v1.0.1. `streamingComponent` creates a React component from an Observable of React elements.","wrong":"const streamingComponent = require('react-props-stream').streamingComponent","symbol":"streamingComponent","correct":"import { streamingComponent } from 'react-props-stream'"},{"note":"ESM-only since v1.0.1. `WithObservable` is a render prop component that subscribes to an observable.","wrong":"const WithObservable = require('react-props-stream').WithObservable","symbol":"WithObservable","correct":"import { WithObservable } from 'react-props-stream'"},{"note":"ESM-only since v1.0.1. Used to create an event stream from React event handlers.","wrong":"const createEventHandler = require('react-props-stream').createEventHandler","symbol":"createEventHandler","correct":"import { createEventHandler } from 'react-props-stream'"}],"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { withPropsStream } from 'react-props-stream';\nimport { timer } from 'rxjs';\nimport { map } from 'rxjs/operators';\n\n// Create an observable that emits an object { number: n } every second\nconst numbers$ = timer(0, 1000).pipe(\n  map(n => ({ number: n }))\n);\n\n// Define a simple functional component that displays a number prop\nconst DisplayNumber = (props: { number: number }) => (\n  <div>The number is {props.number}</div>\n);\n\n// Wrap the component with withPropsStream to inject props from the observable\nconst MyStreamingComponent = withPropsStream(\n  numbers$,\n  DisplayNumber\n);\n\n// Render the streaming component into the DOM\nconst rootElement = document.getElementById('root');\nif (rootElement) {\n  const root = ReactDOM.createRoot(rootElement);\n  root.render(\n    <React.StrictMode>\n      <MyStreamingComponent />\n    </React.StrictMode>\n  );\n}\n\n// To run this, ensure you have an HTML file with `<div id=\"root\"></div>`","lang":"typescript","description":"Demonstrates `withPropsStream` to create a component whose props (an ever-increasing counter) are driven by an RxJS `timer` observable, updating every second."},"warnings":[{"fix":"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.","message":"The package transitioned to ES Modules (ESM) exclusively since version 1.0.1. Projects configured for CommonJS (CJS) will encounter import errors.","severity":"breaking","affected_versions":">=1.0.1"},{"fix":"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.","message":"The dependency on `recompose` was removed in v1.0.1. While `react-props-stream` was inspired by `recompose`, projects implicitly relying on `recompose` being a transitive dependency may experience issues.","severity":"breaking","affected_versions":">=1.0.1"},{"fix":"Adhere strictly to `rxjs@^6` for full compatibility. If using newer RxJS versions, carefully review their migration guides and adapt your RxJS code accordingly.","message":"The library peer-depends on `rxjs@^6`. Using newer versions of RxJS (v7, v8+) might introduce compatibility issues or require adapting import paths and operators, as RxJS has undergone breaking changes across major versions.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure your project is using React 16 or a newer version (e.g., React 17 or 18).","message":"The library requires React version `'>=16'`. Using older React versions will result in runtime errors.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"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.","cause":"Mismatch in RxJS version, or incorrect import path for RxJS operators/creators (e.g., trying to import `timer` from `rxjs/operators` instead of `rxjs`).","error":"TypeError: (0 , rxjs_1.timer) is not a function"},{"fix":"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'`.","cause":"Attempting to import `react-props-stream` using CommonJS `require()` syntax in a Node.js or bundler environment that expects ES Modules.","error":"Error [ERR_REQUIRE_ESM]: require() of ES Module ...react-props-stream/dist/index.js from ... is not supported."},{"fix":"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.","cause":"Passing an invalid component type to `withPropsStream` or `streamingComponent`, or incorrect usage of the HOC where the wrapped component is not a valid React element.","error":"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."},{"fix":"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>`.","cause":"When using the `WithObservable` component, the render prop function is trying to directly render an object emitted by the observable rather than a primitive value or a React element.","error":"Invariant Violation: Objects are not valid as a React child (found: object with keys {number}). If you meant to render a collection of children, use an array instead."}],"ecosystem":"npm"}