A reusable rater for Elm (1 year later)

Firstly, thanks to @pdamoc, @Herteby and @FranzSkuffka for the helpful feedback they gave me when I first announced elm-rater about 1 year ago.



import Rater
import Rater.Rating as Rating exposing (Rating)

type alias Model =
  { rating : Rating
  , rater : Rater.State

init : Model
init =
  { rating = Rating.rate 3 5
  , rater = Rater.init

type Msg
  = NewRaterMsg Rater.Msg
  | ChangedRater Int

update : Msg -> Model -> Model
update msg model =
  case msg of
    NewRaterMsg raterMsg ->
        (newState, maybeMsg) =
          Rater.update ChangedRater model.rating raterMsg model.rater

        newModel =
          { model | rater = newState }
        case maybeMsg of
          Nothing ->

          Just newMsg ->
            update newMsg newModel

    ChangedRater newAmount ->
      { model | rating = Rating.change newAmount model.rating }

view : Model -> Html Msg
view model =
    [ Html.map NewRaterMsg (Rater.view model.rating model.rater) ]

Points of note:

  • Rater.State was required even when it wasn’t needed.
  • You had to configure custom event handlers in the update function.
  • You had to use Html.map in the view function.
  • The API included a custom Msg type (which on retrospect led to the previously mentioned problems).
  • The API did not present a smooth learning curve.
  • For better or worse I used inline styles.


import Rater
import Rater.Rating as Rating exposing (Rating)

type alias Model =
  { rating : Rating }

init =
  { rating = Rating.outOf5 3 }

type Msg
  = ChangedRating Rating

update msg model =
  case msg of
    ChangedRating newRating ->
      { model | rating = newRating }

view { rating } =
  div []
    [ Rater.viewSimple ChangedRating rating ]

Points of note:

  • Rater.State is only used when needed. It’s only needed to support hovering. See this example.
  • Custom event handlers are configured in the view now.
  • No Html.map is needed in the view function.
  • No custom Msg type (which led to the above improvements)
  • I try to present a smooth learning curve.
  • I use BEM to structure the CSS.

Read more about the API Design Principles.

Reusable view learning resources


Good work! It is nice to see projects evolve and mature!

1 Like

Thx for sharing. This will come in handy later.

Nice, how would you give a zero rating though? (I’m thinking Adam Sandler movies etc : )

1 Like

Lol. Though Uncut Gems was good and Hubie Halloween was stupidly funny.

You can clear the rating.


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