Skip to content

Latest commit

 

History

History
87 lines (62 loc) · 2.44 KB

README.md

File metadata and controls

87 lines (62 loc) · 2.44 KB

Deprecated

Cycle DOM now supports selecting on document and body, so this driver is unnecessary.

A driver for Cycle.js to help you deal with mouse events in your application

Installation

$ npm install cycle-mouse-driver --save

Cycle Mouse Driver is stream library agnostic. You should be able to use it with RxJs, xstream, or whatever you like. Please open an issue if you have any troubles, and note which stream library you are using.

Usage

  • Install Cycle Mouse Driver with npm (see above)

  • Import the driver

import {makeMouseDriver} from 'cycle-mouse-driver';
  • Initialise the driver by calling makeMouseDriver() in your drivers object
const drivers = {
  Mouse: makeMouseDriver()
}
  • Add it to your main function's sources
function main({Mouse}) { /* Your amazing main function */ }

Methods

  • up(): returns a stream of mouseup events

  • down(): returns a stream of mousedown events

  • click(): returns a stream of click events

  • positions(): returns a stream of all mousemove events as a vector with an x and a y position.

const mousePosition$ = Mouse.positions();
const mouseUp$ = Mouse.up();

Example

Try this example online

import {run} from '@cycle/xstream-run';
import {makeDOMDriver, div, h1, h3} from '@cycle/dom';
import {makeMouseDriver} from 'cycle-mouse-position'
import xs from 'xstream';

export default function main({DOM, Mouse}){
  const mousePosition$ = Mouse.positions();

  return {
    DOM: mousePosition$.map(pos =>
      div(
        '.container', [
          h1('Where\'s my mouse at? 🐭'),
          h3(`X: ${pos.x}, Y: ${pos.y}`)
        ]
      )
    )
  }
}

const drivers = {
  DOM: makeDOMDriver('.app'),
  Mouse: makeMouseDriver()
};

run(app, drivers);

We would love to hear from you if you have ideas for features we haven't implemented yet, feedback on the API and documentation, or would like to contribute. Feel free to write your ideas here, or open an issue. Thanks!