JSPM

react-props-stream

1.0.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 8122
  • Score
    100M100P100Q118101F
  • License MIT

Utility belt for RxJS streams and React

Package Exports

  • react-props-stream

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-props-stream) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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