Reactive Programming with RxJS

Creating Reusable Widgets

As we make more complex applications, we’ll want to reuse some of their UI components. Our Wikipedia Search application is tiny for the sake of example, but it already has a couple of components that could be reused in other applications. Take the search input box, for example. We can definitely make this into its own widget.

The objective is to encapsulate our widget in its own component so that we use it as any other DOM element. We should also be able to parameterize the component with any properties we want. Then we’ll use it in our applications like this:

var wpSearchBox = searchBox({
  props$: Rx.Observable.just({
    apiUrl: API_URL
  })
});

We’ll build our widget using a concept also introduced by Cycle.js, ...