AkosLukacs / Feliz.SweetAlert

Fable bindings written in the Feliz-style for sweetalert2.

Feliz.SweetAlert

Fable bindings for sweetalert2 and sweetalert2-react-content with Feliz style api for use within React applications.

Implemented as both normal functions and Elmish commands, for maximum flexibility.

See the full documentation with live examples here.

A quick look:

Html.button [
    prop.onClick <| fun _ -> Swal.fire [ swal.text "Howdy!" ]
    prop.text "Fire!"
]

With React components and Elmish:

# Feliz.SweetAlert - Elmish Alerts using React and Msgs

```fsharp:swal-elmish-reactandhandler
open Elmish
open Feliz
open Feliz.ElmishComponents
open Feliz.SweetAlert
open Zanaptak.TypedCssClasses

type Bulma = CssClasses<"https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css", Naming.PascalCase>
type FA = CssClasses<"https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css", Naming.PascalCase>

let titleComp = React.functionComponent (fun (input: {| text: string |}) -> 
    Html.p [ 
        prop.className Bulma.ModalCardTitle

        prop.children (
            Html.strong [ 
                Html.u [ prop.text input.text ] 
            ]
        )
    ])

let bodyComp = React.functionComponent (fun (input: {| link: string |}) ->
    Html.div [
        prop.className Bulma.ModalCardBody
        
        prop.children (
            Html.a [
                prop.href input.link
                prop.target.blank
                prop.text "Back to the repo!"
            ]
        )
    ])

let confirmButtonComp = React.functionComponent (fun () ->
    React.fragment [
        Html.p [
            prop.classes [ FA.Fa; FA.FaThumbsUp ]
    
        ]
        Html.p [
            prop.text "Great!"
        ]
    ])

let cancelButtonComp = React.functionComponent ( fun () ->
    React.fragment [
        Html.p [
            prop.classes [ FA.Fa; FA.FaThumbsDown ]
    
        ]
        Html.p [
            prop.text "Not so great."
        ]
    ])

type Model = { Text: string }

let init () = { Text = "Howdy!" }, Cmd.none

type Msg =
    | GetResponse of string
    | SendAlert of string

let update msg model =
    match msg with
    | GetResponse rsp -> { model with Text = rsp }, Cmd.none
    | SendAlert url ->
        model, Cmd.Swal.fire ([
            swal.title (titleComp {| text = "Look at this title!" |})
            swal.icon.info
            swal.html (bodyComp {| link = url |})
            swal.showCloseButton true
            swal.showCancelButton true
            swal.focusConfirm false
            swal.confirmButtonText (confirmButtonComp())
            swal.cancelButtonText (cancelButtonComp())
        ], (fun res -> 
            match res with
            | SweetAlert.Result.Value _ -> Some (GetResponse "I'm glad you like it!")
            | _ -> None))

let view = React.functionComponent (fun (input: {| model: Model; dispatch: Msg -> unit |}) ->
    let url = "https://github.com/Shmew/Feliz.SweetAlert"

    Html.div [
        prop.className Bulma.Control
        prop.style [
            style.paddingLeft (length.em 8)
            style.paddingBottom (length.em 1)
        ]
        prop.children [
            Html.div [
                Html.p input.model.Text
            ]
            Html.button [
                prop.classes [ Bulma.Button; Bulma.HasBackgroundPrimary; Bulma.HasTextWhite; Bulma.IsLarge ]
                prop.onClick <| fun _ -> input.dispatch (SendAlert url)
                prop.text "Fire!"
            ]
        ]
    ])

let render () = React.elmishComponent("ElmishWithReact",init(), update, (fun model dispatch -> view {| model = model; dispatch = dispatch |}))

If you do not use Feliz or need inline alerts there are alternative bindings over at Elmish.SweetAlert.