Skip to content

Toast useToastController

Andrew Sutton edited this page Sep 17, 2023 · 3 revisions

⚠️useToastController is incomplete. In the TS examples in the docs, dispatchToast is passed DispatchToastOptions as a second parameter, but for now, omit this parameter-- only pass a ReactElement to dispatchToast and apply the DispatchToastOptions to the toaster.⚠️

[<ReactComponent>]
let ToastTest() =
    let toasterId = Fui.useId (Some "toaster", None)

    let toastController = Fui.useToastController(Some toasterId)

    let notify = fun _ ->
        toastController.dispatchToast(
            Fui.toast [
                toast.appearance.inverted
                toast.children [
                    Fui.toastTitle [
                        toastTitle.action (
                            Fui.link [
                                link.text "Undo"
                            ]
                        )
                        toastTitle.text "Email sent"
                    ]
                    Fui.toastBody [
                        toastBody.subtitle "This is a subtitle"
                        toastBody.text "This toast never closes"
                    ]
                    Fui.toastFooter [
                        Fui.link [
                            link.text "Action1"
                        ]
                        Fui.link [
                            link.text "Action2"
                        ]
                    ]
                ]
            ]
        )

    Fui.stack [
        stack.children [
            Fui.toaster [
                toaster.toasterId toasterId
                toaster.timeout 5000
                toaster.intent.success
                toaster.pauseOnHover true
                toaster.limit 1
            ]
            Fui.button [
                button.onClick (fun _ -> notify())
                button.text "Open Toast"
            ]
        ]
    ]
Clone this wiki locally