ReasonML Quick Start Guide

Adding actions

Let's start by adding actions for TouchStart, TouchMove, and TouchEnd:

type action =  | ToggleMenu(bool)  | TouchStart(float)  | TouchMove(float)  | TouchEnd;

We'll need the touch event's clientX property only for TouchStart and TouchMove.

Let's add the event listeners on the top-level <div /> component:

render: self =>  <div    className={"App" ++ (self.state.isOpen ? " overlay" : "")}    onClick={      _event =>        if (self.state.isOpen) {          self.send(ToggleMenu(false));        }    }    onTouchStart={      event =>        self.send(          TouchStart(            ReactEvent.Touch.changedTouches(event)##item(0)##clientX,          ),        )    }    onTouchMove={      event =>        self.send(          TouchMove(            ReactEvent.Touch.changedTouches(event)##item(0)##clientX,          ),        )    }    onTouchEnd={_event => self.send(TouchEnd)}>

In our ...