Fake hook.ts

class MouseDir extends ReactishHook<number> {
  cur = this.useState({ x: 0, y: 0 })
  prev = this.useState({ x: 0, y: 0 })
  
  init () {
    document.addEventListener('mousemove', this.handle)
  }
 
  dispose () {
    document.removeEventListener('mousemove', this.handle)
  }
  
  // just a handler, not part of base class interface
  handle = (ev: MouseEvent) => {
    this.prev.set(this.cur.get())
    this.cur.set({ x: ev.clientX, y: ev.clientY })
  }
  
  get (): number {
    return computeDir(this.prev.get(), this.cur.get())
  }
 
  set () {
    throw 'ReadOnlyHook'
  }
}

class Foo extends ReactishComponent {
  dir = this.use(MouseDir)
  
  render () {
    return <div>{this.dir.get()}</div>
  }

}