Embedding react-geosuggest in Elm

GeoSuggest.elm

module GeoSuggest exposing (geosuggest, onChange)

import Json.Decode
import Html exposing (Html, node)
import Html.Events exposing (on)


onChange : (String -> msg) -> Html.Attribute msg
onChange handler =
    on "change" <|
        Json.Decode.map handler <|
            Json.Decode.at [ "detail", "value" ] Json.Decode.string


geosuggest : List (Html.Attribute msg) -> List (Html msg) -> Html msg
geosuggest =
    node "rp-geosuggest"

index.jsx

'use strict';

import 'reactive-elements';
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import GeoSuggest from 'react-geosuggest';

class RPGeoSuggest extends Component {
  render() {
    <GeoSuggest
      onSuggestSelect={ (suggest) => {
         const event = new CustomEvent('change', {
           bubbles: true,
           detail: { value: suggest.label },
         });
         ReactDOM.findDOMNode(this.elementRef).dispatchEvent(event);
      }}
      ref={ (element) => { this.elementRef = element; }}
      {...props}
    />
  }
};

require('reactive-elements');


document.registerReact('rp-geosuggest', RPGeoSuggest);