Skip to content

Wiki Usage

Elai Zuberman edited this page Feb 18, 2021 · 2 revisions

Welcome to the AlertToast wiki!

Quickstart

The usage is very simple. Use the .presentAlert view modifier that expects AlertToast.

Usage example with a regular alert

import AlertToast
import SwiftUI

struct ContentView: View{

    @State private var showAlert = false

    var body: some View{
        VStack{

            Button("Show Alert"){
                 showAlert.toggle()
            }
        }
        .presentAlert(isPresenting: $showAlert){
            AlertToast(type: .regular, title: "Message Sent!")
        }
    }
}

In-deph

Alert Toast using .presentAlert modifier. There are a few more parameters this modifier can have:

  • isPresenting: Assign a Binding (MUST).
  • duration: default is 2, applying 0 will never dismiss the alert (Optional).
  • tapToDismiss: default is true, applying false will prevent tap to dismiss (Optional).
  • alert: expects to receive an AlertToast (MUST).
  • completion: after dismissal, returns true (Optional).

Complete Modifier Example

.presentAlert(isPresenting: $showAlert, duration: 2, tapToDismiss: true, alert: {
   
   //AlertToast Goes Here
   
}, completion: { dismissed in
   //Completion block after dismiss (returns true)
})

Some of the parameters are not needed for every Alert Toast, but for loading, for example, you don't want to let the user dismiss the loading alert nor it would auto dismiss after 2 seconds, or maybe you do, it's up to you.

So, for a loading alert, you want to apply those parameters:

Loading Alert Full Example

import AlertToast
import SwiftUI

struct ContentView: View{

    @State private var isLoading = false

    var body: some View{
        VStack{

            Button("Login Button For Example"){
                 isLoading.toggle()
            }
        }
        .presentAlert(isPresenting: $isLoading, duration: 0, tapToDismiss: false){
            AlertToast(type: .loading)
        }
    }
}

Alert dialog view modifier (with default settings):

.presentAlert(isPresenting: Binding<Bool>, duration: Double = 2, tapToDismiss: true, alert: { () -> AlertToast }, completion: { (Bool) -> () })

Properties and Parameters

displayMode

There are 2 display modes right now:

  • Alert: (Default) an alert that similar to Apple's Music alerts when you add a song to your library.
  • HUD: HUD is a toast that drops from the top of the screen (like when connecting Airpods to iPhone).

type

There are 6 available alert types:

  • Regular: text only (Title and Subtitle).
  • Complete: animated checkmark.
  • Error: animated xmark.
  • System Image: name image from SFSymbols.
  • Image: name image from Assets.
  • Loading: Activity Indicator (Spinner).

title & subTitle

The title and subTitle are optional String parameters. Decide if you want to have a description on the alert or not. For example, a loading alert doesn't have to have a title or subTitle.

titleFont & subTitleFont

Those are Optional Font parameters. If you have your own fonts for a specific project you can use them too with Alert Toast.

boldTitle

As you guessed, this is an Optional Boolean to decide if you want a bold title. The default is TRUE.

A full AlertToast initialization:

AlertToast(displayMode: .alert/.hud, type: AlertType, title: Optional(String), subTitle: Optional(String), titleFont: Optional(Font), subTitleFont: Optional(Font), boldTitle: Optional(Bool))

All Alert Toast Implementations

Simple Text Alert:

AlertToast(type: .regular, title: Optional(String), subTitle: Optional(String))

Complete/Error Alert:

AlertToast(type: .complete(Color)/.error(Color), title: Optional(String), subTitle: Optional(String))

System Image Alert:

AlertToast(type: .systemImage(String, Color), title: Optional(String), subTitle: Optional(String))

Image Alert:

AlertToast(type: .image(String), title: Optional(String), subTitle: Optional(String))

Loading Alert:

//When using loading, set the duration at the .presentAlert modifier to 0.
AlertToast(type: .loading, title: Optional(String), subTitle: Optional(String))

A User Sign In Full Example

var body: some View {
        
        VStack{

            if loginComplete{
                Text("Welcome to AlertToast!")
                    .font(.largeTitle)
                    .bold()
                    .transition(.opacity)
            }else{

            // some content ...

                Button("Some Login Button") {
                    showLoader.toggle()
                    
                    //Simulate sign-in process:
                    DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
                        
                        //Dismiss the loader because the duration is 0!
                        showLoader.toggle()
                        
                        //Replace with another
                        if password == "123456"{
                            showComplete.toggle()
                        }else{
                            showError.toggle()
                        }
                    }
                }
            }

            // some content ...

        }
        .presentAlert(isPresenting: $showLoader, duration: 0, tapToDismiss: false){
            AlertToast(type: .loading)
        }
        .presentAlert(isPresenting: $showError){
            AlertToast(type: .error(.red), title: "Error", subTitle: "Incorrect password")
        }
        .presentAlert(isPresenting: $showComplete, alert: {
            AlertToast(type: .complete(.green), title: "Signed In!")
        }, completion: { dismissed in
            if dismissed{
                withAnimation(.spring()){
                    loginComplete = true
                }
            }
        })
    }