Skip to content

Instantly share code, notes, and snippets.

@obmarg
Last active May 25, 2017 13:37
Show Gist options
  • Save obmarg/678fdcd4a592ff97476e6b9697dee0c0 to your computer and use it in GitHub Desktop.
Save obmarg/678fdcd4a592ff97476e6b9697dee0c0 to your computer and use it in GitHub Desktop.
Embedding react-geosuggest in 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"
'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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment