Module ReactEvent
type synthetic('a)
;This is the whole synthetic event system of ReactJS/ReasonReact. The first module
Synthetic
represents the generic synthetic event. The rest are the specific ones.In each module, the type
t
commonly means "the type of that module" (OCaml convention). In our case, e.g.ReactEvent.Mouse.t
represents a ReactJS synthetic mouse event. You'd use it to type your props:type props = { onClick: ReactEvent.Mouse.t => unit };
All the methods and properties of a type of event are in the module, as seen below.
Each module also has a
tag
type. You can ignore it; they're only needed by theirt
type. This way, we get to allow a baseSynthetic
event module with generic methods. So e.g. even a mouse event (Mouse.t
) get to be passed to a generic handler:let handleClick = ({state, props}, event) => { ReactEvent.Mouse.preventDefault(event); ... }; let handleSubmit = ({state, props}, event) => { /* this handler can be triggered by either a Keyboard or a Mouse event; * conveniently use the generic preventDefault */ ReactEvent.Synthetic.preventDefault(event); ... }; let render = (_) => <Foo onSubmit=handleSubmit onEnter=handleSubmit .../>;
How to translate idioms from ReactJS:
myMouseEvent.preventDefault() -> ReactEvent.Mouse.preventDefault(myMouseEvent)
myKeyboardEvent.which -> ReactEvent.Keyboard.which(myMouseEvent)
module Synthetic: { ... };
external toSyntheticEvent: synthetic('a) => Synthetic.t = "%identity";
module Clipboard: { ... };
module Composition: { ... };
module Keyboard: { ... };
module Focus: { ... };
module Form: { ... };
module Mouse: { ... };
module Selection: { ... };
module Touch: { ... };
module UI: { ... };
module Wheel: { ... };
module Media: { ... };
module Image: { ... };
module Animation: { ... };
module Transition: { ... };