This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
Display toasts and other temporary UI notifications
version 1.0.0
license BSD 3-Clause
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 1.0.0
Committed At 2017-01-27 14:44:54 UTC
elm-lang/core 5.0.0 <= v < 6.0.0 5.1.1




A view agnostic way to handle toasts and other temporary notifications.

A typical application would be to display temporary notifications as Html views in your elm app. This module takes care of updating the notifications and let's you decide what content should be included in your notifications and how these should be represented in your view.


This is a screenshot of the example app. The design is part of your apps responsibility. The concept of this package is that it does not impose any view or design concept on your app (it does not even have to be Html).

Screenshot of elm-toast example

Minimal implementation

Your app should contain the current time and the Toast somewhere in its model.

type alias Model =
    { time : Time
    , toast : Toast String

You will then need to subscribe to time updates. The frequency of the updates will determine the update frequency of the toast and how accurately start times, expiration times and transition delays are respected:

type Msg
    = Tick Time
    | PostNotification String

subscriptions : Model -> Sub Msg
subscriptions model =
    Time.every (Time.second * 1) Tick

In your update method you will need to update the time and update the toast in your model on every Tick message. In addition you will probably want to add any posted notification to your model's Toast:

pureUpdate : Msg -> Model -> Model
pureUpdate msg model =
    case msg of
        Tick newTime ->
                newToast =
                    Toast.updateTimestamp newTime model.toast
                updateTime newTime model
                    |> updateToast newToast

        PostNotification notification ->
                newToastNotification =
                    Toast.createNotification notification (model.time + Time.second * 3)

                newToast =
                    Toast.addNotification newToastNotification model.toast
                updateToast newToast model

updateTime : Time -> Model -> Model
updateTime time model =
    { model | time = time }

updateToast : Toast String -> Model -> Model
updateToast toast model =
    { model | toast = toast }