Toast

This library is a Work In Progress so changes can still occur.

This library aims to provide you a nice way to inform the user that something occured. By attaching itself at the top level of your application toasts can be persistant between page navigation.

It also provides a very basic input system. Do not abuse it, a toast should be about notifying the user, not asking them to perform an action.

Demo

You can see a demo on this page.

How to use ?

  1. Add the Thoth.Elmish.Toast dependency in your Paket files: paket add Thoth.Elmish.Toast --project <your project>

  2. Attach the toast system to your Elmish program

open Elmish
open Thoth.Elmish

Program.mkProgram init update view
|> Toast.Program.withToast Toast.render
|> Program.run
  1. You can now send Toast from any command in your program.
let update msg model =
    match msg with
    | DemoInfo ->
        model, Toast.message "I am toast of type Info"
                |> Toast.title "Info"
                |> Toast.info

Customize the view

This library includes a default render function. You can use the default function to experiment with the library and see if it fits your needs.

We strongly encourage you to implement your own render.

Examples:

Name F# code CSS code
Default F# code CSS code
Fulma F# code CSS code

API

Usage

Any time you want to send a toast you need to follow these rules:

  1. Create it and set its content using Toast.message
  2. Pipe any number of Builders you want
  3. Use one of the Triggers to set its Status and send it

Status

type Status =
    | Success
    | Warning
    | Error
    | Info

Position

type Position =
    | BottomRight
    | BottomLeft
    | BottomCenter
    | TopRight
    | TopLeft
    | TopCenter

Builder

Function Description
Toast.message Create a toast and set the message content
Toast.title Set the title content
Toast.position Set the position
Toast.addInput Add an input to the toast
Toast.icon Set the icon
Toast.timeout Set the timeout in seconds
Toast.noTimeout No timeout, make sure to add a close button or dismiss on click
Toast.dismissOnClick Allow user to dismiss the toast by cliking on it
Toast.withCloseButton Add a close button

Trigger

Function Description
Toast.success Send the toast marked with Success status
Toast.warning Send the toast marked with Warning status
Toast.error Send the toast marked with Error status
Toast.info Send the toast marked with Info status