Elmish.Toastr

KO | EN

gitlite — search

#python #javascript #react #typescript #css #html #linux #api #reactjs #nodejs #java #kotlin

★ 23 Open GitHub ↗

Toastr integration with Fable, implemented as Elmish commands https://zaid-ajaj.github.io/Elmish.Toastr/

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Elmish.Toastr [![Build Status](https://travis-ci.org/Zaid-Ajaj/Elmish.Toastr.svg?branch=master)](https://travis-ci.org/Zaid-Ajaj/Elmish.Toastr) [![Build status](https://ci.appveyor.com/api/projects/status/fopejrl0niled0dt?svg=true)](https://ci.appveyor.com/project/Zaid-Ajaj/elmish-toastr) [![Nuget](https://img.shields.io/nuget/v/Elmish.Toastr.svg?maxAge=0&colorB=brightgreen)](https://www.nuget.org/packages/Elmish.Toastr)

[Toastr](https://github.com/CodeSeven/toastr) integration with Fable, implemented as [Elmish](https://github.com/fable-elmish/elmish) commands.

[Live Demo Application with Examples](https://zaid-ajaj.github.io/Elmish.Toastr/)

## 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` and `style-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

```fs
open Elmish
open Elmish.Toastr

type Msg = 
    | ShowSuccess
    | Clicked
    | Closed

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
```

Elmish.Toastr

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README