Elmish.HTML.Events

newtype InputChangeEvent

Event object specifically for the onChange event of the <input> tag. While it doesn't have any special properties relative to SyntheticEvent, it's modeled as a separate type so as to support the custom accessors inputText and inputChecked, thus reducing the friction in the most frequent use case of:

input { type: "text", onChange: dispatch <| MyInputChanged <<< E.inputText }

input { type: "checkbox", onChange: dispatch <| MyCheckboxChanged <<< E.inputChecked }

Constructors

• InputChangeEvent RSyntheticEvent

Instances

• CanReceiveFromJavaScript InputChangeEvent
• IsSyntheticEvent InputChangeEvent

newtype KeyboardEvent

Event object for keyboard-related events such as onKeyDown or onKeyPress. This type follows React docs at https://reactjs.org/docs/events.html#keyboard-events

Constructors

• KeyboardEvent RKeyboardEvent

Instances

• CanReceiveFromJavaScript KeyboardEvent
• IsSyntheticEvent KeyboardEvent
• IsKeyboardOrMouseEvent KeyboardEvent

newtype MouseEvent

Event object for mouse-related events such as onMouseDown or onMouseMove. This type follows React docs at https://reactjs.org/docs/events.html#mouse-events

Constructors

• MouseEvent RMouseEvent

Instances

• CanReceiveFromJavaScript MouseEvent
• IsSyntheticEvent MouseEvent
• IsKeyboardOrMouseEvent MouseEvent

newtype SelectChangeEvent

Event object specifically for the onChange event of the <select> tag. While it doesn't have any special properties relative to SyntheticEvent, it's modeled as a separate type so as to support the custom accessor selectSelectedValue, thus reducing the friction in the most frequent use case of:

select { onChange: dispatch <| MyInputChanged <<< E.selectSelectedValue }

Constructors

• SelectChangeEvent RSyntheticEvent

Instances

• CanReceiveFromJavaScript SelectChangeEvent
• IsSyntheticEvent SelectChangeEvent

newtype SyntheticEvent

The most generic event object from React, for events that don't have any special properties. This type follows React docs at https://reactjs.org/docs/events.html

Constructors

• SyntheticEvent RSyntheticEvent

Instances

• CanReceiveFromJavaScript SyntheticEvent
• IsSyntheticEvent SyntheticEvent

newtype TextAreaChangeEvent

Event object specifically for the onChange event of the <textarea> tag. While it doesn't have any special properties relative to SyntheticEvent, it's modeled as a separate type so as to support the custom accessor textareaText, thus reducing the friction in the most frequent use case of:

textarea { onChange: dispatch <| MyTextareaChanged <<< E.textareaText }

Constructors

• TextAreaChangeEvent RSyntheticEvent

Instances

• CanReceiveFromJavaScript TextAreaChangeEvent
• IsSyntheticEvent TextAreaChangeEvent

newtype TouchEvent

Event object for touch-related events such as onTouchStart or onTouchMove. This type follows React docs at https://reactjs.org/docs/events.html#touch-events

Constructors

• TouchEvent RTouchEvent

Instances

• CanReceiveFromJavaScript TouchEvent
• IsSyntheticEvent TouchEvent
• IsKeyboardOrMouseEvent TouchEvent

inputChecked :: InputChangeEvent -> Boolean

Convenience accessor for extracting the checked state of an <input type=checkbox> tag in its onChange handler.

input { type: "checkbox", onChange: dispatch <| MyCheckboxChanged <<< E.inputChecked }

inputText :: InputChangeEvent -> String

Convenience accessor for extracting the value of an <input type=text> tag in its onChange handler.

input { type: "text", onChange: dispatch <| MyInputChanged <<< E.inputText }

selectSelectedValue :: SelectChangeEvent -> String

Convenience accessor for extracting the selected value of a <select> tag in its onChange handler.

select { onChange: dispatch <| MyInputChanged <<< E.selectSelectedValue }

textareaText :: TextAreaChangeEvent -> String

Convenience accessor for extracting the value of a <textarea> tag in its onChange handler.

textarea { onChange: dispatch <| MyTextareaChanged <<< E.textareaText }

newtype EventHandler event

Type of event handling functions. This is the standard shape of all event handlers on React's built-in components (aka tags) and most third-party components as well. The constructor is intentionally hidden. Use the handle function to create instances of this type.

Instances

• CanPassToJavaScript (EventHandler event)

type Dispatch msg = msg -> Effect Unit

A function that a view can use to report messages originating from JS/DOM.

handle :: forall event. Dispatch event -> EventHandler event

Create a React event handler from a function event -> Effect Unit.

stopPropagation :: forall e. IsSyntheticEvent e => e -> Effect Unit

Prevents propagation of the event up the React DOM tree. See also https://reactjs.org/docs/events.html

preventDefault :: forall e. IsSyntheticEvent e => e -> Effect Unit

Prevents the default handling of the event by the browser. See also https://reactjs.org/docs/events.html

getModifierState :: forall e. IsKeyboardOrMouseEvent e => String -> e -> Boolean

Returns the state of a given modifier key during an event, as defined in https://reactjs.org/docs/events.html#keyboard-events

This function applies only to certain kinds of events, such as MouseEvent or KeyboardEvent.