Skip to content

Handles mouse events on the document in Cycle.js applications

License

Notifications You must be signed in to change notification settings

cyclejs-community/cycle-mouse-driver

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

37 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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!

About

Handles mouse events on the document in Cycle.js applications

Resources

License

Stars

Watchers

Forks

Packages

No packages published