Configure Recompose to Build React Components from RxJS Streams

Pass a React Prop to a Stream in RxJS

Stream a React Component from an Ajax Request with RxJS

Handle React Events as Streams with RxJS and Recompose

Merge RxJS Button Event Streams to Build a React Counter Component

Stream Props to React Children with RxJS

Stream Props to Multiple Children with React's Children.map  and RxJS

Create Stream Behaviors to Push Props in React Components with mapPropsStream

Compose Streams of React Props with Recompose’s compose and RxJS

Make Reusable React Props Streams with Lenses

Refactor React Render Props to Streaming Props with RxJS and Recompose

Build React Components from Streams with RxJS and Recompose

When you declare your Component and Props in JSX, you can pass those props along to your [RxJS](/q/rxjs) stream. This is typically done using `switchMap` or `combineLatest` where you can grab from the props from your `props$` stream and push them into another stream.

Instructor: [00:00] Pass props to a peer component by setting up, we'll call this streamingApp. We'll use component from stream, which gives us our props as a stream, and we use those props to map to the jsx we want to output. I'm going to use app here as a function. I could just grab this and copy and paste it here, Then say streamingApp, hit save, and you'll see the exactly same result. 

[00:29] I can change this to ImAStreamingApp, and you can see this message prop is still streaming down into the jsx. When I change this back to the app -- just so you see there is no trickery going on here -- this will always be a peer component with props, and we're just mapping to that directly. 

[00:46] I'm going to create a typewriter, so I'm going to need that message. This function will return an observable.zip, which takes that message and says from message, so from will break apart the string and push each letter through individually.  

[01:04] We can zip that up with observable interval, a hundred milliseconds, which means that we'll take one letter of the message every one hundred milliseconds. These will match together and zip together, but we only want the letter, so this third parameter here's a function, where the first argument is this observable and the second one would be that observable. 

[01:30] I just need to write a function that takes the first argument and returns it. We'll scan this together, so accumulator current, accumulator plus current, meaning that, as each letter comes through current, add it to the current message. 

[01:42] Now, with our props, we can switchMap our props over to the create typewriter, pass in props.message. Then we need to remap this back, because, right now, we're only getting the message out, but we want to return an object, which is an object of our props that's going to be passed into here. 

[02:04] Right now, this is just a string, and then we turn it into an object with message on it, so that, when it comes in here, it's an object with message on it. The final reveal, once I hit save, you'll see a typewriter effect. 

[02:17] You can add a second prop here. We'll say speed is one second. Then we'll go to our create typewriter, we'll say props.speed, which means we need to update our function here, which will be message and speed, then pass in our speed here. Now when I hit save, you'll see it goes a bit slower, pumping out one letter per second.

Course

Build React Components from Streams with RxJS and Recompose

Pass a React Prop to a Stream in RxJS

Share this video with your friends