We have made a Cycle.js app for generic labeled slider which can be configured through props, but how can we reuse it in other Cycle.js apps? This lesson shows how we can embed any Cycle program inside a larger Cycle program in a very simple manner.
Now we have a generic labeled slider that can be configured here through these props, but is it reusable? How could we reuse it in other Cycle.js apps? First of all, notice that main is not a special name. There's nothing magical about it. It's just a function, which is being passed here to Cycle.run, so I could rename it to be anything. Well, labeled slider and labeled slider down here and it still works.
Besides that, I could make a function called main that takes sources and returns what the labeled slider returns. Main is just wrapping the labeled slider. I could use now main in Cycle.run and it's also working.
But, now, wait a minute. Main is where we write code to make application logic and there you go. Labeled slider is now a component and we are using it from within main, so it wasn't that hard after all. Main takes sources.DOM and sources.props from the drivers and simply passes those to the labeled slider.
In fact, I could move this props-stream into main, like that, and then I can use it here for the labeled slider. The DOM source will come from sources.DOM and props is prop-stream. Labeled slider takes its DOM source from the main's arguments, but props source is created internally in main.
We can get rid of the driver now. We can now customize the component from within main. We can give like wait, and then we just need to continue building main because now everything is just RxJS code inside main. That's how we go about reusing a component in main.