https://github.com/Zaid-Ajaj/Elmish.Toastr

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

Last synced: 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/Zaid-Ajaj/Elmish.Toastr
• Owner: Zaid-Ajaj
• License: mit
• Created: 2018-01-06T04:31:11.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-01T19:41:03.000Z (over 1 year ago)
• Last Synced: 2024-01-30T06:59:39.795Z (5 months ago)
• Language: F#
• Homepage: https://zaid-ajaj.github.io/Elmish.Toastr/
• Size: 2.12 MB
• Stars: 23
• Watchers: 3
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-fable - Elmish.Toastr - [Toastr](https://github.com/CodeSeven/toastr) (notification library) integration with Fable, implemented as Elmish commands (Libraries)

README

        
# 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 successToast : Cmd = 

    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

```