Utility belt for RxJS streams and React
npm install react-props-streamUtility belt for RxJS streams and React
withPropsStream(
ownerPropsToChildProps: Observable`Similar to recompose/mapPropsStream
#### Example: Component that displays an ever-increasing counter every second
`jsx
import {withPropsStream} from 'react-props-stream'
import {timer} from 'rxjs'
import {map} from 'rxjs/operators'const numbers$ = timer(0, 1000).pipe(map(n => ({number: n})))
const MyStreamingComponent = withPropsStream(
numbers$,
props =>
The number is {props.number}
)
`#### Example: Component that automatically fetches
props.url when its value change`jsx
import {createEventHandler} from 'react-props-stream'
import {map, distinctUntilChanged, switchMap} from 'rxjs/operators'const FetchComponent = withPropsStream(
props$ =>
props$.pipe(
map(props => props.url),
distinctUntilChanged(),
switchMap(url => fetch(url).then(response => response.text())),
map(responseText => ({responseText}))
),
props =>
The result was: {props.responseText}
)// Usage
ReactDOM.render( , document.getElementById('myid'))
`$3
Similar to recompose/componentFromStream###
`jsx
import {streamingComponent} from 'react-props-stream'
import {map, distinctUntilChanged, switchMap} from 'rxjs/operators'const FetchComponent = streamingComponent<{url: string}>(props$ =>
props$.pipe(
map(props => props.url),
distinctUntilChanged(),
switchMap(url => fetch(url).then(response => response.text())),
map(responseText =>
The result was: {responseText})
)
)
`$3
`jsx
import {WithObservable} from 'react-props-stream'
import {timer} from 'rxjs'
import {map} from 'rxjs/operators'const numbers$ = timer(0, 1000).pipe(map(n => ({number: n})))
function MyComponent(props) {
return (
{num => The number is {num}}
)
}
``