React Props Stream Utilities

Common errors

• TypeError: (0 , rxjs_1.timer) is not a function

  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`).
  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.

• Error [ERR_REQUIRE_ESM]: require() of ES Module ...react-props-stream/dist/index.js from ... is not supported.

  cause Attempting to import `react-props-stream` using CommonJS `require()` syntax in a Node.js or bundler environment that expects ES Modules.
  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'`.

• Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

  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.
  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.

• 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.

  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.
  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>`.

Warnings

• breaking The package transitioned to ES Modules (ESM) exclusively since version 1.0.1. Projects configured for CommonJS (CJS) will encounter import errors.
  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.
• breaking 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.
  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.
• gotcha 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.
  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.
• gotcha The library requires React version `'>=16'`. Using older React versions will result in runtime errors.
  Fix: Ensure your project is using React 16 or a newer version (e.g., React 17 or 18).

Install

• npm install react-props-stream npm
• yarn add react-props-stream yarn
• pnpm add react-props-stream pnpm

Imports

• withPropsStream
  wrong:

  const { withPropsStream } = require('react-props-stream')

  correct:

  import { withPropsStream } from 'react-props-stream'

  ESM-only since v1.0.1. `withPropsStream` is a Higher-Order Component to connect an Observable to component props.
• streamingComponent
  wrong:

  const streamingComponent = require('react-props-stream').streamingComponent

  correct:

  import { streamingComponent } from 'react-props-stream'

  ESM-only since v1.0.1. `streamingComponent` creates a React component from an Observable of React elements.
• WithObservable
  wrong:

  const WithObservable = require('react-props-stream').WithObservable

  correct:

  import { WithObservable } from 'react-props-stream'

  ESM-only since v1.0.1. `WithObservable` is a render prop component that subscribes to an observable.
• createEventHandler
  wrong:

  const createEventHandler = require('react-props-stream').createEventHandler

  correct:

  import { createEventHandler } from 'react-props-stream'

  ESM-only since v1.0.1. Used to create an event stream from React event handlers.

Quickstart

Demonstrates `withPropsStream` to create a component whose props (an ever-increasing counter) are driven by an RxJS `timer` observable, updating every second.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { withPropsStream } from 'react-props-stream';
import { timer } from 'rxjs';
import { map } from 'rxjs/operators';

// Create an observable that emits an object { number: n } every second
const numbers$ = timer(0, 1000).pipe(
  map(n => ({ number: n }))
);

// Define a simple functional component that displays a number prop
const DisplayNumber = (props: { number: number }) => (
  <div>The number is {props.number}</div>
);

// Wrap the component with withPropsStream to inject props from the observable
const MyStreamingComponent = withPropsStream(
  numbers$,
  DisplayNumber
);

// Render the streaming component into the DOM
const rootElement = document.getElementById('root');
if (rootElement) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <React.StrictMode>
      <MyStreamingComponent />
    </React.StrictMode>
  );
}

// To run this, ensure you have an HTML file with `<div id="root"></div>`