react-props-stream
v1.0.1
Published
Utility belt for RxJS streams and React
Downloads
32,487
Maintainers
Keywords
Readme
react-props-stream
Utility belt for RxJS streams and React
API
withPropsStream
HOC
withPropsStream(
ownerPropsToChildProps: Observable<object> | (props$: Observable<object>) => Observable<object>,
BaseComponent: ReactElementType
): ReactComponent
Similar to recompose/mapPropsStream
Example: Component that displays an ever-increasing counter every second
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 => <div>The number is {props.number}</div>
)
Example: Component that automatically fetches props.url
when its value change
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 => <div>The result was: {props.responseText}</div>
)
// Usage
ReactDOM.render(<FetchComponent url="http://example.com" />, document.getElementById('myid'))
streamingComponent
Similar to recompose/componentFromStream
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 => <div>The result was: {responseText}</div>)
)
)
WithObservable
React component
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 (
<WithObservable observable={numbers$}>
{num => <div>The number is {num}</div>}
</WithObservable>
)
}
More examples
See more examples here: https://github.com/sanity-io/react-props-stream/tree/master/examples
Prior art
This is heavily inspired by recompose