This package lets you easily show customizable toast notifications in your Elm apps following The Elm Architecture. You will be able to trigger toasts as a side-effect of model updates by piping your update function return value through this library addToast function.

While this package lets you configure each part of the rendering and behaviour of the notification stack, you can use a nice default theme configuration provided in Toasty.Defaults. See a demo using default styling.

Example

Setting things up

To use the package, let's look at an example that shows a simple text notification.

First you add the toast stack to your model, wrapping the toast model you want in Stack. You must do it in a field called toasties:

type alias Model =
    { toasties : Toasty.Stack String }

Add the stack initial state in your init function:

init : ( Model, Cmd Msg )
init =
    ( { toasties = Toasty.initialState }, Cmd.none )

Then add in a message that will handle toasts messages:

type alias Msg =
    ToastyMsg (Toasty.Msg String)

You can use the default configuration as-is or tweak it to your needs by piping configuration helpers:

myConfig : Toasty.Config msg
myConfig =
    Toasty.config
        |> Toasty.transitionOutDuration 100
        |> Toasty.delay 8000

Handle the toasts message in your app update function using the library update function:

update msg model =
    case msg of
        ToastyMsg subMsg ->
            Toasty.update myConfig ToastyMsg subMsg model

As a last step, render the toast stack in you view function. You will need to provide an special view function that knows how to render your toast model:

view : Model -> Html Msg
view model =
    div []
        [ h1 [] [ text "Toasty example" ]
        , Toasty.view myConfig renderToast ToastyMsg model.toasties
        ]


renderToast : String -> Html Msg
renderToast toast =
    div [] [ text toast ]

Triggering toasts

Most of the times you will want to trigger toasts as side-effect of some other app event, e.g. show a message when an asynchronous response was received. In order to do that, just pipe your update function returned value through the addToast function passing your configuration, tag and toast.

    update msg model =
        case msg of
            SomeAppMsg ->
                ( newModel, Cmd.none )
                    |> Toasty.addToast myConfig ToastyMsg "Entity successfully created!"

That's all!

Definition

Configuration

The notifications appearance and behaviour can be fully customized. To do this, you need to import the default configuration and tweak it by piping the provided helper functions.

Note that as you can set container and items HTML attributes the library remains agnostic about how to style your toasts, enabling you to use inline styles or classes.

myConfig : Toasty.Config msg
myConfig =
    Toasty.config
        |> Toasty.transitionOutDuration 700
        |> Toasty.delay 8000
        |> Toasty.containerAttrs containerAttrs


containerAttrs =
    [ style
        [ ( "max-width", "300px" )
        , ( "position", "fixed" )
        , ( "right", "0" )
        , ( "top", "0" )
        ]
    ]

Other functions