wonka-dom

Tools for working with DOM events and Wonka FRP

Usage no npm install needed!

<script type="module">
  import wonkaDom from 'https://cdn.skypack.dev/wonka-dom';
</script>

README

WonkaDOM

Tools for working with DOM events using the Wonka FRP library.

Peer Dependencies

This library depends on the Wonka FRP library, and you'll want to install it directly and use it along with WonkaDOM.

Usage

ReasonML

Use Yarn or npm to install:

yarn add wonka wonka-dom

And add to your bsconfig.json along with wonka:

  "bs-dependencies": ["wonka", "wonka-dom"],

Then open the WonkaDOM module along with Wonka:

open Wonka;
open WonkaDOM;

fromAnimationFrame
  |> subscribe((. time) => Js.log(time));

TypeScript

Use Yarn or npm to install:

yarn add wonka wonka-dom

Then, import functions from wonka-dom:

import {pipe, subscribe} from 'wonka'
import {fromAnimationFrame} from 'wonka-dom'

pipe(
  fromAnimationFrame,
  subscribe(time => {
    console.log(time)
  })
)

API

Sources

fromWindowEvent: : string => sourceT('a)

Attach an event handler for a top-level window event.

fromWindowEvent("keydown")
  |> isKey("ArrowLeft")
  |> subscribe((. event) => Js.log(event));

fromKeyPressed: string => sourceT(bool)

Creates a source which will emit true when the key matching the given key code is pressed, and false when it's released.

fromKeyPressed("ArrowLeft")
  |> subscribe((. pressed) => Js.log(pressed));

fromMouseButton: int => sourceT(bool)

Creates a source which will emit true when the given mouse button is pressed, and false when it's released.

fromMouseButton(1)
  |> subscribe((. pressed) => Js.log(pressed));

fromMouseButtonPressed: mouseButton => sourceT(bool)

Creates a source which will be true when the given mouse button is pressed, and false when it's released. Note: in IE8 and earlier you need to use MouseIE8MiddleButton if you want to query the middle button.

fromMouseButtonPressed(`Right)
  |> subscribe((. pressed) => Js.log(pressed));

fromTouch: sourceT(Dom.TouchEvent.touchList)

A source containing the current state of the touch device.

fromTouch
  |> subscribe((. touches) => Js.log(touches));

fromTap: sourceT(bool)

A source which will be true when at least one finger is touching the touch device, and false otherwise.

fromTap
  |> subscribe((. tapped) => Js.log(tapped));

fromMousePos: sourceT(mousePosition)

A source containing the current mouse position.

fromMousePos
  |> subscribe((. {x, y}) => Js.log2(x, y));

fromAnimationFrame: sourceT(float)

A source which yields the current time, as determined by now, on every animation frame.

fromAnimationFrame
  |> subscribe((. time) => Js.log(time));

Operators

isKey: string => operatorT('a, 'a)

Only emit if the KeyboardEvent key matches the given key.

fromWindowEvent("keydown")
  |> isKey("ArrowLeft")
  |> subscribe((. keyEvent) => Js.log(keyEvent));

isButton: int => operatorT('a, 'a)

Only emit if the MouseEvent button matches the given button.

fromWindowEvent("mousedown")
  |> isButton(0)
  |> subscribe((. mouseEvent) => Js.log(mouseEvent));