The Reactive Extensions for JavaScript Bindings for DOM (RxJS-DOM) Examples

The Reactive Extensions for JavaScript have a number of examples that highlight the unique capabilities of the library.

Scenarios

Autocomplete

Coordinate key up behavior with querying a web service to retrieve hints for queries.

• See the code
• Edit the code in JSFiddle

Canvas Paint

Paint on an HTML5 Canvas by coordinating mouse move with mouse down events until mouse up.

• See the code
• Edit the code in JSFiddle

Drag and Drop

Implement drag and drop with ease of dragging an image around a page.

• See the code
• Edit the code in JSFiddle

Konami Code

Implement the Konami Code using the Reactive Extensions with a buffer to react to entering the following:

↑↑↓↓←→←→BA

• See the code
• Edit the code in JSFiddle

Request Animation Frame

Using the the Rx.Scheduler.requestAnimationFrame scheduler to draw a shape on the screen by passing it into the generate function.

• See the code
• Edit the code in JSFiddle

Time Flies Like an Arrow

This is an example showing Time Flies Like An Arrow which moves around based upon mouse movements. Each letter is delayed by its position multiplied by its index.

• See the code
• Edit the code in JSFiddle