iziToast demo with tsfable 0.2.0

App.fs

module izitoast_demo

open Fable.Core.JsInterop
open Fable.Import.IziToast

let iziToast: IziToast = importAll "iziToast"
iziToast.info (jsOptions<IziToastSettings>(fun o ->
    o.title <- Some "Hello"
    o.message <- "Welcome"
    o.onClosing <- Some (fun _instance _toast closedBy -> 
        printfn "Closing | closedBy: %s" closedBy
    )
    o.onClosed <- Some (fun _instance _toast closedBy -> 
        printfn "Closed | closedBy: %s" closedBy
    )
))

Fable.Import.IziToast.fs

module rec Fable.Import.IziToast
open System
open Fable.Core
open Fable.Import.JS
open Fable.Import.Browser

type [<AllowNullLiteral>] IExports =
    abstract iziToast: IziToast with get, set

type [<StringEnum>] [<RequireQualifiedAccess>] IziToastPosition =
    | [<CompiledName "bottomRight">] BottomRight
    | [<CompiledName "bottomLeft">] BottomLeft
    | [<CompiledName "topRight">] TopRight
    | [<CompiledName "topLeft">] TopLeft
    | [<CompiledName "topCenter">] TopCenter
    | [<CompiledName "bottomCenter">] BottomCenter
    | [<CompiledName "center">] Center

type [<StringEnum>] [<RequireQualifiedAccess>] IziToastTransitionIn =
    | [<CompiledName "bounceInLeft">] BounceInLeft
    | [<CompiledName "bounceInRight">] BounceInRight
    | [<CompiledName "bounceInUp">] BounceInUp
    | [<CompiledName "bounceInDown">] BounceInDown
    | [<CompiledName "fadeIn">] FadeIn
    | [<CompiledName "fadeInDown">] FadeInDown
    | [<CompiledName "fadeInUp">] FadeInUp
    | [<CompiledName "fadeInLeft">] FadeInLeft
    | [<CompiledName "fadeInRight">] FadeInRight
    | [<CompiledName "flipInX">] FlipInX

type [<StringEnum>] [<RequireQualifiedAccess>] IziToastTransitionOut =
    | [<CompiledName "fadeOut">] FadeOut
    | [<CompiledName "fadeOutUp">] FadeOutUp
    | [<CompiledName "fadeOutDown">] FadeOutDown
    | [<CompiledName "fadeOutLeft">] FadeOutLeft
    | [<CompiledName "fadeOutRight">] FadeOutRight
    | [<CompiledName "flipOutX">] FlipOutX

type [<AllowNullLiteral>] IziToastSettings =
    abstract id: string option with get, set
    abstract ``class``: string option with get, set
    abstract title: string option with get, set
    abstract titleColor: string option with get, set
    abstract titleSize: string option with get, set
    abstract titleLineHeight: string option with get, set
    abstract message: string with get, set
    abstract messageColor: string option with get, set
    abstract messageSize: string option with get, set
    abstract messageLineHeight: string option with get, set
    abstract backgroundColor: string option with get, set
    abstract color: string option with get, set
    abstract icon: string option with get, set
    abstract iconText: string option with get, set
    abstract iconColor: string option with get, set
    abstract image: string option with get, set
    abstract imageWidth: float option option with get, set
    abstract maxWidth: float option option with get, set
    abstract zindex: float option option with get, set
    abstract layout: float option with get, set
    abstract balloon: bool option with get, set
    abstract close: bool option with get, set
    abstract rtl: bool option with get, set
    abstract position: IziToastPosition option with get, set
    abstract target: string option with get, set
    abstract targetFirst: bool option with get, set
    abstract toastOnce: bool option with get, set
    abstract timeout: U2<bool, float> option with get, set
    abstract drag: bool option with get, set
    abstract pauseOnHover: bool option with get, set
    abstract resetOnHover: bool option with get, set
    abstract progressBar: bool option with get, set
    abstract progressBarColor: string option with get, set
    abstract animateInside: bool option with get, set
    abstract buttons: ResizeArray<obj> option with get, set
    abstract transitionIn: IziToastTransitionIn option with get, set
    abstract transitionOut: IziToastTransitionOut option with get, set
    abstract transitionInMobile: IziToastTransitionIn option with get, set
    abstract transitionOutMobile: IziToastTransitionOut option with get, set
    abstract onOpening: (IziToastSettings -> HTMLDivElement -> unit) option with get, set
    abstract onOpened: (IziToastSettings -> HTMLDivElement -> unit) option with get, set
    abstract onClosing: (IziToastSettings -> HTMLDivElement -> string -> unit) option with get, set
    abstract onClosed: (IziToastSettings -> HTMLDivElement -> string -> unit) option with get, set

type [<AllowNullLiteral>] IziToast =
    abstract show: settings: IziToastSettings -> unit
    abstract hide: settings: IziToastSettings * toast: HTMLDivElement * closedBy: string -> unit
    abstract info: settings: IziToastSettings -> unit
    abstract error: settings: IziToastSettings -> unit
    abstract warning: settings: IziToastSettings -> unit
    abstract success: settings: IziToastSettings -> unit
    abstract destroy: unit -> unit
    abstract settings: settings: IziToastSettings -> unit

index.html

<!doctype html>
<html>
<head>
  <title>Simple Fable App</title>
  <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>

izitoast.d.ts

// Type definitions for IziToast
// Project https://github.com/dolce/iziToast
// Definitions by: Tarık İNCE <incetarik@hotmail.com> and Marcelo Dolce <dolcemarcelo@gmail.com>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped 

type IziToastPosition = "bottomRight" | "bottomLeft" | "topRight" | "topLeft" | "topCenter" | "bottomCenter" | "center"
type IziToastTransitionIn = "bounceInLeft" | "bounceInRight" | "bounceInUp" | "bounceInDown" | "fadeIn" | "fadeInDown" | "fadeInUp" | "fadeInLeft" | "fadeInRight" | "flipInX"
type IziToastTransitionOut = "fadeOut" | "fadeOutUp" | "fadeOutDown" | "fadeOutLeft" | "fadeOutRight" | "flipOutX"

interface IziToastSettings {
    /**
     * Id of the toast
     */
    id?: string,
    /**
     * The class that will be applied to the toast. It may be used as a reference.
     */
    class?: string,
    /** 
     * Title of the toast.
     */
    title?: string,
    /**	
     * Title color. 
     */
    titleColor?: string,
    /** 
     * Title fontSize. 
     */
    titleSize?: string,
    /** 
     * Title lineHeight. 
     */
    titleLineHeight?: string,
    /** 
     * Message of notification. 
     */
    message: string,
    /**	
     * Message color. 
     */
    messageColor?: string,
    /**	
     * Message fontSize. 
     */
    messageSize?: string,
    /** 
     * Message lineHeight. 
     */
    messageLineHeight?: string,
    /** 
     * Background color of the Toast 
     */
    backgroundColor?: string,
    /** 
     * It can be #hexadecimal, pre-defined themes like blue, red, green and yellow or set another class. Create and use like this ".iziToast-color-name" 
     */
    color?: string, 
    /** 
     * Icon class (font-icon of your choice, Icomoon, Fontawesome etc.). 
     */
    icon?: string,
    /** 
     * Icon text (font-icon using text, Material Icons, etc.). 
     */
    iconText?: string,
    /** 
     * Icon color. 
     */
    iconColor?: string,
    /**	
     * Cover image. 
     */
    image?: string,
    /**
     * Width of cover image. 
     * Example 100(px)
     * Default value: null
     */
    imageWidth?: number | null,
    /**
     * Sets maxWidth of toast. 
     * Example 500px 
     * Default value: null
     */
    maxWidth?: number | null,
    /**	
     * The z-index CSS attribute of the toast
     * Default value: null
     */
    zindex?: number | null,
    /** 
     * It can be 1 or 2, or use another layout, creating the class like this: ".iziToast-layout3" 
     * Default value: 1
     */
    layout?: number,
    /**
     * Applies a balloon like toast. 
     * Default value: false
    */
    balloon?: boolean,
    /**
     * Show "x" close button.
     * Default value: true
     */
    close?: boolean,
    /**
     * RTL option
     * Default value: false
     */
    rtl?: boolean,
    /**
     * Where it will be shown. 
     * Default value: bottomRight
     */
    position?: IziToastPosition 
    /** Fixed place where you want to show the toasts. */
    target?: string,
    /**	
     * Add toast to first position. 
     * Default value: true
     */
    targetFirst?: boolean,
    /**
     * Waits for another toast to be closed on 'onClosed' function. You'll need an ID to use it.
     */
    toastOnce?: boolean,
    /** 
     * Amount in milliseconds to close the toast or false to disable. 
     * Default value: 5000
     */
    timeout?: boolean | number,
    /**
     * Drag feature used to close the toast.
     * Default value: true 
     */
    drag?: boolean,
    /** 
     * Pause the toast timeout while the cursor is on it. 
     * Default value: true
     */
    pauseOnHover?: boolean,
    /**
     * Reset the toast timeout while the cursor is on it. 
     * Default value: false
     */
    resetOnHover?: boolean,
    /**	
     * Enable timeout progress bar. 
     * Default value: true
     */
    progressBar?: boolean,
    /**	
     * Progress bar color. 
     */
    progressBarColor?: string,
    /**
     * Enable animations of elements in the toast.
     * Default value: true
     */
    animateInside?: boolean,
    /** 
     * Array of buttons.
     * Array is an array of array that contains (string, function (instance, toast)) types.
     */
    buttons?: ([string, (instance: IziToast, toast: HTMLDivElement) => void])[],
    /**
     * Default toast open animation.
     * Default value: 'fadeInUp'
     */
    transitionIn?: IziToastTransitionIn,
    /**
     * Default toast close animation. 
     * Default value: 'fadeOut'
     */
    transitionOut?: IziToastTransitionOut,
    /**
     * Default toast opening mobile transition. 
     * Default value: 'fadeInUp'
     */
    transitionInMobile?: IziToastTransitionIn,
    /**
     * Default toast closing mobile transition. 
     * Default value: 'fadeOutDown'
     */
    transitionOutMobile?: IziToastTransitionOut,
    /** 
     * Callback function triggered when opening the toast. 
     * @param settings Settings of opening toast.
     * @param toast Toast DOM element.
     */
    onOpening?: (settings: IziToastSettings, toast: HTMLDivElement) => void,
    /** 
     * Callback function triggered when opened the toast. 
     * @param settings Settings of opening toast.
     * @param toast Toast DOM element.
     */
    onOpened?: (settings: IziToastSettings, toast: HTMLDivElement) => void,
    /** 
     * Callback function triggered when closing the toast. 
     * @param settings Settings of closing toast.
     * @param toast Toast DOM element.
     * @param closedBy Closed by info set by hide method.
     */
    onClosing?: (settings: IziToastSettings, toast: HTMLDivElement, closedBy: string) => void,
    /** 
     * Callback function triggered when closed the toast. 
     * @param settings Settings of closing toast.
     * @param toast Toast DOM element.
     * @param closedBy Closed by info set by hide method.
     */
    onClosed?: (settings: IziToastSettings, toast: HTMLDivElement, closedBy: string) => void,

}

interface IziToast {
    /**
     * Opens the toast. 
     */
    show(settings: IziToastSettings): void
    /**
     * Closes the specific toast.
     * @param settings Settings for this toast.
     * @param toast Toast element to hide.
     * @param closedBy Custom closed by info to use in other functions.
     */
    hide(settings: IziToastSettings, toast: HTMLDivElement, closedBy: string): void
    /**
     * Shows an info toast.
     * @param settings Settings for this toast.
     */
    info(settings: IziToastSettings): void
    /**
     * Shows an error toast.
     * @param settings Settings for this toast.
     */
    error(settings: IziToastSettings): void
    /**
     * Shows a warning toast.
     * @param settings Settings for this toast.
     */
    warning(settings: IziToastSettings): void
    /**
     * Shows a success toast.
     * @param settings Settings for this toast.
     */
    success(settings: IziToastSettings): void

    /**
     * Destroys all toasts.
     */
    destroy(): void

    /**
     * Sets default values.
     * @param settings Settings to set as default.
     */
    settings(settings: IziToastSettings): void;
}

declare var iziToast: IziToast

izitoast_demo.fsproj

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <TargetFramework>netstandard2.0</TargetFramework>
  </PropertyGroup>
  <ItemGroup>
    <Compile Include="Fable.Import.IziToast.fs" />
    <Compile Include="App.fs" />
  </ItemGroup>
  <Import Project="..\.paket\Paket.Restore.targets" />
</Project>