{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-props-stream"],"cli":null},"imports":["import { withPropsStream } from 'react-props-stream'","import { streamingComponent } from 'react-props-stream'","import { WithObservable } from 'react-props-stream'","import { createEventHandler } from 'react-props-stream'"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}