Search code examples
javascriptinteropelm

Is it possible to add Javascript UI elements to a 100% elm application?

I have an elm application that is working fine. It has a navigation bar that we built using standard elm UI functional code. Someone sees my app and says you should be using our standard javascript toolbar UI component. Is it possible to embed a Javascript UI component into a 100% native ELM app?

Note, we already are using ports to call some native JavaScript functions. I am wondering if the same concept can be used to embed UI components but since ELM has it's own internal rendering would this be problematic?

Solution

  • It's not clear to me what you mean by "Javascript UI components" since that could refer to many different things such as react components or angular components. But Elm does support standard Web Components through Custom Elements.

    Here's an incomplete example of what it looks like on the Elm side, borrowed (and redacted a bit) from Beginning Elm:

    googleMap : List (Attribute a) -> List (Html a) -> Html a
googleMap =
    Html.node "google-map"


onGoogleMapDrag : Attribute Msg
onGoogleMapDrag =
    coordinatesDecoder
        |> Json.Decode.map UpdateCenter
        |> on "google-map-drag"


view : Model -> Html Msg
view model =
    googleMap
        [ attribute "latitude" (toString model.center.latitude)
        , attribute "longitude" (toString model.center.longitude)
        , attribute "drag-events" "true"
        , attribute "zoom" "5"
        , onGoogleMapDrag
        ]
        (List.map viewMarker model.markers)