{"_id":"react-props-stream","_rev":"150-5ecd706087766aaadc603a5ae95089bc","name":"react-props-stream","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"react-props-stream","version":"1.0.0","keywords":[],"author":"","license":"ISC","_id":"react-props-stream@1.0.0","maintainers":[{"name":"bjoerge","email":"bjoerge@gmail.com"}],"dist":{"shasum":"9d8629c619766085d4b2a107ff9e7c60b72dbaa2","tarball":"https://registry.npmjs.org/react-props-stream/-/react-props-stream-1.0.0.tgz","fileCount":55,"integrity":"sha512-LU49rWyoqVwKhZABoziAHCkc0yaCQB3y2g6aOqXNPnArN74agNcQJVP/Kmv38WlL9DblNjC+YGBBrwn/x1Oa7A==","signatures":[{"sig":"MEYCIQCnJobua8a6mvOAlkXUxPSybZlo7ctbjOL4NzaRzB+SLAIhANesqpivSaRhQfvEAcE+pK/gw/wTdeOLCTcOk041m8OD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":71679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb5YD8CRA9TVsSAnZWagAACE4P/0HBfwagQCDfIp3zS7fO\nsaCkUkWgmdgL+qSYbYNFlQPx89+vwiWZnUVgxL07c49ebLQqlmTde4AIXTEm\nKBH+x0zCxfNLykewUdOQUGz4Ln8my25KIK8EIVSEyzI1cD3MXzM+veuLGwNs\nFkyKNEZiv9NjbJj0FOdtD8xyEDk3STcQ581QzWIMiFSNJkX6gJO2iOl00sY5\nRHLduNBsGpsvBwQHZD0pf/ZMlDfDpzEBAykGYYhO2ecdEN4Qpbe3vb0cUNoa\nAoOWv26Q2WFluCwkcHYoYQYZsuQW8390FtXlpeZDwYayT7DRr3WwtMr11+Jx\nJjwDn/dJCjUkUcg7MbXDb7BKfG7e7vIPbntiCvX8so2h9+0fJB88RXlofTRg\nCZIG23pZ4gtPwzKjCxCg29ciRPpounfE+ri0LEGYNLzGy4K1/NzCKjJzCGKJ\nDFiFlAU1haYJvbNqpoLW5R6t6kspusmVTO7pcOmSfMp1c1l3RR/x751Z0RQm\nbsmyIVNw4NXaNRbU6r8WjlkM3ZPYLeO1ymwdgxImNy2TrFsoP1+LKeghLlw2\nXbaJCSVLiLJNj7roNQ+vsJkGx/AqEV7KmEFbTvLz0DNA4fwUdLQDuGkEsNIv\n7a3sflw+LvKkfpT+F1K9BGADqAO1OoZx9szVrKM/yG7OGmNGTju9q5iOxzyc\nQQYO\r\n=/LMX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","gitHead":"bb466862cc54ebaa1b9963032f682f7649c1d752","scripts":{"build":"tsc -d","clean":"rimraf build","start":"mkdir -p dist/fetch && cp examples/fetch/*.txt dist/fetch && parcel examples/index.html","prepublish":"npm run build","postpublish":"npm run clean"},"_npmUser":{"name":"bjoerge","email":"bjoerge@gmail.com"},"_npmVersion":"6.4.1","description":"Utility belt for RxJS streams and React","directories":{},"_nodeVersion":"10.9.0","dependencies":{"recompose":"^0.30.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^23.6.0","rxjs":"^6.3.3","react":"^16.5.2","rimraf":"^2.6.2","tslint":"^5.11.0","ts-node":"^7.0.1","date-fns":"^2.0.0-alpha.23","prettier":"1.14.3","react-dom":"^16.5.2","typescript":"^3.1.3","@types/react":"^16.4.18","parcel-bundler":"^1.10.3","@types/react-dom":"^16.0.9","tslint-config-prettier":"^1.15.0"},"peerDependencies":{"rxjs":"^6","react":">=16"},"_npmOperationalInternal":{"tmp":"tmp/react-props-stream_1.0.0_1541767420157_0.6131142805702854","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"react-props-stream","version":"1.0.1","keywords":[],"author":{"name":"Bjørge Næss","email":"bjoerge@sanity.io"},"license":"MIT","_id":"react-props-stream@1.0.1","maintainers":[{"name":"bjoerge","email":"bjoerge@gmail.com"}],"homepage":"https://github.com/sanity-io/react-props-stream#readme","bugs":{"url":"https://github.com/sanity-io/react-props-stream/issues"},"dist":{"shasum":"dac2198df19d27efe2d0f9bf7eb016e1ec22c4f9","tarball":"https://registry.npmjs.org/react-props-stream/-/react-props-stream-1.0.1.tgz","fileCount":73,"integrity":"sha512-lBMW9S7OvqE8sYruPTpG8Dv7WVwHiDt4hJmhixoRNlHBtVMnMvMJal/tsH8F/YKMsObvSkY3PCWCPRLqnEaOaw==","signatures":[{"sig":"MEUCIQDM6MIfnkIumqkYzcdxP7ZE6LQI5nR12iB9FS0t50Fs9QIgKIKsJA3DB9Nour6/SXwanMNBqmtgDrQBMvCsL1cjYr8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":49271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxRgcCRA9TVsSAnZWagAA5KcQAJ3P9Sv1Q7rK8IA5gp2D\ntrQn0zdkJ5e+Z4+pdjDIzwiDLaT7HLigpHZN8DyHcduO/UfDIKuuG2J+3Qh3\nlbeBNSHBTUVUhMb4SXGHS3BWE436SYt6Tu/vbimhY63SDObpv3/mP4pL8wum\nXe6FmAwvwHHNcXezF1Lc9lHyYGV+mP+Q9+uJ3IkbL4cuPIDXipnCzkicQG39\nLbRNR/NoZp3EsNiVwRF0KoNz8VhmqdTFOCkdGqD83jECekthMfcqvaqyv6AR\niQeRk0kuhFSVn1ykZ5unqdLb+3WLasQwMPJqn3OJPIIuj0bPcewvIWZaBnTc\nn/0W+oxEa8Onhikn0QxPjxGwc9g1hJ+kQXC2jGKEuRbjTGLQb6wI0Bw+utsm\nXTbC0e5EI0iTVPFSkV5uo0y69aWcXhsUGLrImbUvQA4AWP2uhtoJByzo5xFe\nNxh2+2af6bOzF5oLrrmCPQ9enWCGaCzczoq++9OW2Ey2x/zRvZGpLPN+pnRf\nG1BkGVUV6mVsNmya46PaW7RF3WY6UsUxNMVp5z+OXGoWpZ8WBn+eM9WvBvv6\nz9HTM/9H4hZxFCsP9enxZndnwe7IGbcrvZfDpTFa1ST3lnJb20BeZHTSnuzI\n27iplMZubFaWvdd5vNb0TRcUEGoMzsmP1HJ8eyhxs6EEKyB0leJAUCRAsH/z\nZXEq\r\n=+fJK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","es2015":"dist/es2015/index.js","module":"dist/esm/index.js","gitHead":"c403c462cdb8553c6ecad3bf7b06a32cadf86e51","scripts":{"build":"npm run build:es2015 && npm run build:esm && npm run build:cjs","clean":"rimraf build","start":"mkdir -p dist/fetch && cp examples/fetch/*.txt dist/fetch && parcel examples/index.html","prebuild":"npm run clean","build:cjs":"tsc --module commonjs --target es5 --outDir dist","build:esm":"tsc --module es2015 --target es2015 --outDir dist/esm","build:es2015":"tsc --module es2015 --target es2015 --outDir dist/es2015","prepublishOnly":"npm run build"},"_npmUser":{"name":"bjoerge","email":"bjoerge@gmail.com"},"repository":{"url":"git+https://github.com/sanity-io/react-props-stream.git","type":"git"},"_npmVersion":"6.14.8","description":"Utility belt for RxJS streams and React","directories":{"example":"examples"},"sideEffects":false,"_nodeVersion":"14.15.0","_hasShrinkwrap":false,"devDependencies":{"jest":"^26.6.3","rxjs":"^6.3.3","react":"^16.5.2","rimraf":"^2.6.2","tslint":"^5.11.0","ts-node":"^7.0.1","date-fns":"^2.0.0-alpha.23","prettier":"1.14.3","react-dom":"^16.5.2","typescript":"^4.1.2","@types/react":"^16.4.18","parcel-bundler":"^1.12.4","@types/react-dom":"^16.0.9","tslint-config-prettier":"^1.15.0"},"peerDependencies":{"rxjs":"^6","react":">=16"},"_npmOperationalInternal":{"tmp":"tmp/react-props-stream_1.0.1_1606752284079_0.8965823441474696","host":"s3://npm-registry-packages"}}},"time":{"created":"2018-11-09T12:43:40.156Z","modified":"2026-04-08T15:16:01.019Z","1.0.0":"2018-11-09T12:43:40.323Z","1.0.1":"2020-11-30T16:04:44.262Z"},"bugs":{"url":"https://github.com/sanity-io/react-props-stream/issues"},"author":{"name":"Bjørge Næss","email":"bjoerge@sanity.io"},"license":"MIT","homepage":"https://github.com/sanity-io/react-props-stream#readme","keywords":[],"repository":{"url":"git+https://github.com/sanity-io/react-props-stream.git","type":"git"},"description":"Utility belt for RxJS streams and React","maintainers":[{"email":"bjoerge@gmail.com","name":"bjoerge"},{"email":"svc.npm@sanity.io","name":"sanity-svc.npm"},{"email":"developers@sanity.io","name":"sanity-io"}],"readme":"# react-props-stream\n\nUtility belt for RxJS streams and React\n\n## API\n### `withPropsStream` HOC\n```\nwithPropsStream(\n  ownerPropsToChildProps: Observable<object> | (props$: Observable<object>) => Observable<object>,\n  BaseComponent: ReactElementType\n): ReactComponent\n```\n\nSimilar to [recompose/mapPropsStream](https://github.com/acdlite/recompose/blob/master/docs/API.md#mappropsstream)\n\n#### Example: Component that displays an ever-increasing counter every second\n```jsx\nimport {withPropsStream} from 'react-props-stream'\nimport {timer} from 'rxjs'\nimport {map} from 'rxjs/operators'\n\nconst numbers$ = timer(0, 1000).pipe(map(n => ({number: n})))\n\nconst MyStreamingComponent = withPropsStream(\n  numbers$,\n  props => <div>The number is {props.number}</div>\n)\n```\n\n#### Example: Component that automatically fetches `props.url` when its value change\n\n```jsx\nimport {createEventHandler} from 'react-props-stream'\nimport {map, distinctUntilChanged, switchMap} from 'rxjs/operators'\n\nconst FetchComponent = withPropsStream(\n  props$ =>\n    props$.pipe(\n      map(props => props.url),\n      distinctUntilChanged(),\n      switchMap(url => fetch(url).then(response => response.text())),\n      map(responseText => ({responseText}))\n    ),\n  props => <div>The result was: {props.responseText}</div>\n)\n\n// Usage\nReactDOM.render(<FetchComponent url=\"http://example.com\" />, document.getElementById('myid'))\n```\n\n### `streamingComponent`\nSimilar to [recompose/componentFromStream](https://github.com/acdlite/recompose/blob/master/docs/API.md#mappropsstream)\n\n###\n```jsx\nimport {streamingComponent} from 'react-props-stream'\nimport {map, distinctUntilChanged, switchMap} from 'rxjs/operators'\n\nconst FetchComponent = streamingComponent<{url: string}>(props$ =>\n  props$.pipe(\n    map(props => props.url),\n    distinctUntilChanged(),\n    switchMap(url => fetch(url).then(response => response.text())),\n    map(responseText => <div>The result was: {responseText}</div>)\n  )\n)\n```\n\n### `WithObservable` React component\n\n```jsx\nimport {WithObservable} from 'react-props-stream'\nimport {timer} from 'rxjs'\nimport {map} from 'rxjs/operators'\n\nconst numbers$ = timer(0, 1000).pipe(map(n => ({number: n})))\n\nfunction MyComponent(props)  {\n  return (\n    <WithObservable observable={numbers$}>\n      {num => <div>The number is {num}</div>}\n    </WithObservable>\n  )\n}\n```\n\n## More examples\nSee more examples here: https://github.com/sanity-io/react-props-stream/tree/master/examples\n\n# Prior art\nThis is heavily inspired by [recompose](https://github.com/acdlite/recompose)\n","readmeFilename":"README.md"}