Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Handle React Events as Streams with RxJS and Recompose


    Events are the beginning of most every stream. Recompose provides a createEventHandler function to help your create handler and stream pairs. Once the handler/stream pairs are created, it’s simply a matter of passing the handlers down the stream as props and combining the streams any way you want.



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




    Instructor: Currently, this simple form takes some text and an onInput that simply logs out what you type into the input. If I type in hello, you can see hello show up in the console log. We'll create a simple form stream using component from stream.

    We'll write some logic inside this block. I want to create a stream off of this onInput to push the changes into text. I can do that with importing createEventHandler. Then I will use createEventHandler, which gives me back an object with a stream and a handler.

    I'm going to rename these to onInput, a dollar sign to say it's a stream, and onInput, which'll be the function I pass into the component. I'm going to use the onInput stream, get the event off of it, and the event target.value. This can be a text stream.

    I can return this text stream and map it to some props. I'll say text, and map that to an object which is our props now. That will be the text we want and the onInput handler we defined above. Then we can map that to the simple form.

    I'll go ahead and use the simple form stream, hit save there, and you'll see that nothing shows up. The only thing that shows up right now is our simple form. Let's go ahead and delete that real quick to show that truly nothing shows up.

    The reason here is that our text has not triggered yet, because it won't trigger until something comes in on onInput. It's like we didn't define any default props. We can say start with an empty string, and that will trigger our onInput, and push some empty text into here.

    When I save now, you can see now, a form showed up, and I can stream values in. Then just to make this a little more visually appealing, because we have a stream, and we can do whatever we want with it, I'll add in a delay. I'll say, "Streams are awesome."