Awesome
Elmish.Toastr
![Nuget](https://img.shields.io/nuget/v/Elmish.Toastr.svg?maxAge=0&colorB=brightgreen)
Toastr integration with Fable, implemented as Elmish commands.
Live Demo Application with Examples
Installation
- Install this library from nuget
paket add nuget Elmish.Toastr --project /path/to/Project.fsproj
- Install toastr from npm
npm install toastr --save
- Because this library directly uses and imports the CSS dependency from the npm toastr package, you will need the appropriate CSS loaders for Webpack:
css-loader
andstyle-loader
, install them :
npm install css-loader style-loader --save-dev
- Now from your Webpack, use the loaders:
{
test: /\.(sa|c)ss$/,
use: [
"style-loader",
"css-loader"
]
}
Usage
See the demo app for reference. Create toastr commands and use them in the Elmish dispatch loop
open Elmish
open Elmish.Toastr
type Msg =
| ShowSuccess
| Clicked
| Closed
let successToast : Cmd<Msg> =
Toastr.message "Success message"
|> Toastr.title "Shiny title"
|> Toastr.position TopRight
|> Toastr.timeout 3000
|> Toastr.withProgressBar
|> Toastr.hideEasing Easing.Swing
|> Toastr.showCloseButton
|> Toastr.closeButtonClicked Closed
|> Toastr.onClick Clicked
|> Toastr.success
let update msg model =
match msg with
| ShowSuccess ->
model, successToast
| Clicked ->
let infoToast =
Toastr.message "You clicked previous toast"
|> Toastr.title "Clicked"
|> Toastr.info
model, infoToast
| Closed ->
let infoToast =
Toastr.message "You clicked the close button"
|> Toastr.title "Close Clicked"
|> Toastr.info
model, infoToast
| _ ->
model, Cmd.none