How to create a reusable element

Learn
1

I started to learn Elm but I can’t realize how to build a reusable component. For example in React I can write a button and use it anywhere with given params and a callback. How to implement it in Elm 0.19?

1 Like
2

I think the structure section of the documentation is pretty relevant here, specificially the bit on components:

Folks coming from React expect everything to be components. Actively trying to make components is a recipe for disaster in Elm.

For small, re-usable stateless things like buttons, you can just create a view function for them:

button : String -> msg -> Html msg
button text msg =
    Html.button
        [ Html.Events.onClick msg, Html.Attributes.class "my-button" ]
        [ Html.text text ]

And use it wherever you want a button:

type Msg = ButtonClicked

view : Model -> Html Msg
view _ =
    button "Click me!" ButtonClicked
7 Likes
4

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.