base on Create Apple-like alerts & toasts using SwiftUI # AlertToast-SwiftUI [](https://twitter.com/intent/tweet?text=Get%20over%20170%20free%20design%20blocks%20based%20on%20Bootstrap%204&url=https://froala.com/design-blocks&via=froala&hashtags=bootstrap,design,templates,blocks,developers) ### Present Apple-like alert & toast in SwiftUI <p align="center"> <img src="https://github.com/elai950/AlertToast/blob/master/Assets/GithubCoverNew.png" width="480"/> </p> ## 🌄 Example <p align="center"> <img src="https://github.com/elai950/AlertToast/blob/master/Assets/onboarding.png" style="display: block; margin: auto;"/> </p> <p align="center"> <img src="https://github.com/elai950/AlertToast/blob/master/Assets/ToastExample.gif" style="display: block; margin: auto;" width="180"/> </p> ## 🔭 Overview Currently in SwiftUI, the only way to inform the user about some process that finished for example, is by using `Alert`. Sometimes, you just want to display a message that tells the user that something has completed or that their message was sent. Apple doesn't provide any method other than using Alert, even though they use various types of pop-ups. This results in poor UX, as the user must tap 'OK' or 'Dismiss' for every piece of information they should be notified about Alert Toast is an open-source library in Github to use with SwiftUI. It allows you to present popups that don't need any user action to dismiss or to validate. Some great usage examples: `Message Sent`, `Poor Network Connection`, `Profile Updated`, `Logged In/Out`, `Favorited`, `Loading` and so on... <img src="https://img.shields.io/badge/BUILD-1.3.9-green?style=for-the-badge" />&nbsp;&nbsp;&nbsp;<img src="https://img.shields.io/badge/PLATFORM-IOS%20|%20MACOS-lightgray?style=for-the-badge" />&nbsp;&nbsp;&nbsp;<img src="https://img.shields.io/badge/LICENSE-MIT-lightgray?style=for-the-badge" />&nbsp;&nbsp;&nbsp;<img src="https://img.shields.io/badge/MADE WITH-SWIFTUI-orange?style=for-the-badge" /> * Built with pure SwiftUI. * 3 Display modes: `Alert` (pop at the center), `HUD` (drop from the top) and `Banner` (pop/slide from the bottom). * `Complete`, `Error` `SystemImage`, `Image`, `Loading`, and `Regular` (Only Text). * Supports Light & Dark Mode. * Works with **any** kind of view builder. * Localization support. * Font & Background customization. #### If you like the project, don't forget to `put star 🌟`. <a href="mailto:[email protected]"><img src="https://img.shields.io/badge/EMAIL-ELAI-informational?style=for-the-badge&logo=minutemailer&logoColor=white"></a>&nbsp;&nbsp;&nbsp;<a href="https://www.linkedin.com/in/elai-zuberman-8120a073/" target="_blank"><img src="https://img.shields.io/badge/LINKEDIN-informational?style=for-the-badge&logo=linkedin&logoColor=white" ></a>&nbsp;&nbsp;&nbsp;<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5JN5PT55NAHKU" target="_blank"><img src="https://img.shields.io/badge/Donate-informational?style=for-the-badge&logo=paypal&logoColor=white" ></a> ₿ Bitcoin donation address: ``` 0xec48bfa813a773fa2394aec23f97da5cb4d5ff02 ``` - Send only BTC to this deposit address. - Ensure the network is BNB Smart Chain (BEP20). ## Navigation - [Installation](#-installation) - [CocoaPods](#cocoapods) - [Swift Package Manager](#swift-package-manager) - [Manually](#manually) - [Usage](#-usage) - [Usage example with regular alert](#usage-example-with-regular-alert) - [Complete Modifier Example](#complete-modifier-example) - [Alert Toast Parameters](#alert-toast-parameters) - [Article](#-article) - [Contributing](#-contributing) - [Author](#-author) - [License](#-license) ## 💻 Installation ### Cocoapods [AlertToast Cocapods Website](https://cocoapods.org/pods/AlertToast) CocoaPods is a dependency manager for Cocoa projects. For usage and installation instructions, visit their website. To integrate `AlertToast` into your Xcode project using CocoaPods, specify it in your Podfile: ```ruby pod 'AlertToast' ``` ------ ### Swift Package Manager The [Swift Package Manager](https://swift.org/package-manager/) is a tool for managing the distribution of Swift code. It’s integrated with the Swift build system to automate the process of downloading, compiling, and linking dependencies. To integrate `AlertToast` into your Xcode project using Xcode 12, specify it in `File > Swift Packages > Add Package Dependency...`: ```ogdl https://github.com/elai950/AlertToast.git, :branch="master" ``` For Xcode 13, please refer [this article](https://iiroalhonen.medium.com/adding-a-swift-package-dependency-in-xcode-13-937b2caaf218) to install `AlertToast` ------ ### Manually If you prefer not to use any of dependency managers, you can integrate `AlertToast` into your project manually. Put `Sources/AlertToast` folder in your Xcode project. Make sure to enable `Copy items if needed` and `Create groups`. ## 🧳 Requirements - iOS 13.0+ | macOS 11+ - Xcode 12.0+ | Swift 5+ ## 🛠 Usage First, add `import AlertToast` on every `swift` file you would like to use `AlertToast`. Then, use the `.toast` view modifier: **Parameters:** - `isPresenting`: (MUST) assign a `Binding<Bool>` to show or dismiss alert. - `duration`: default is 2, set 0 to disable auto dismiss. - `tapToDismiss`: default is `true`, set `false` to disable. - `alert`: (MUST) expects `AlertToast`. #### Usage example with regular alert ```swift import AlertToast import SwiftUI struct ContentView: View{ @State private var showToast = false var body: some View{ VStack{ Button("Show Toast"){ showToast.toggle() } } .toast(isPresenting: $showToast){ // `.alert` is the default displayMode AlertToast(type: .regular, title: "Message Sent!") //Choose .hud to toast alert from the top of the screen //AlertToast(displayMode: .hud, type: .regular, title: "Message Sent!") //Choose .banner to slide/pop alert from the bottom of the screen //AlertToast(displayMode: .banner(.slide), type: .regular, title: "Message Sent!") } } } ``` #### Complete Modifier Example ```swift .toast(isPresenting: $showAlert, duration: 2, tapToDismiss: true, alert: { //AlertToast goes here }, onTap: { //onTap would call either if `tapToDismis` is true/false //If tapToDismiss is true, onTap would call and then dismis the alert }, completion: { //Completion block after dismiss }) ``` ### Alert Toast Parameters ```swift AlertToast(displayMode: DisplayMode, type: AlertType, title: Optional(String), subTitle: Optional(String), style: Optional(AlertStyle)) //This is the available customizations parameters: AlertStyle(backgroundColor: Color?, titleColor: Color?, subTitleColor: Color?, titleFont: Font?, subTitleFont: Font?) ``` #### 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). #### Alert dialog view modifier (with default settings): ```swift .toast(isPresenting: Binding<Bool>, duration: Double = 2, tapToDismiss: true, alert: () -> AlertToast , onTap: () -> (), completion: () -> () ) ``` #### Simple Text Alert: ```swift AlertToast(type: .regular, title: Optional(String), subTitle: Optional(String)) ``` #### Complete/Error Alert: ```swift AlertToast(type: .complete(Color)/.error(Color), title: Optional(String), subTitle: Optional(String)) ``` #### System Image Alert: ```swift AlertToast(type: .systemImage(String, Color), title: Optional(String), subTitle: Optional(String)) ``` #### Image Alert: ```swift AlertToast(type: .image(String), title: Optional(String), subTitle: Optional(String)) ``` #### Loading Alert: ```swift //When using loading, duration won't auto dismiss and tapToDismiss is set to false AlertToast(type: .loading, title: Optional(String), subTitle: Optional(String)) ``` You can add many `.toast` on a single view. ## 📖 Article I wrote an article that contains more usage examples. [Medium - How to toast an alert in SwiftUI](https://elaizuberman.medium.com/presenting-apples-music-alerts-in-swiftui-7f5c32cebed6) ## 👨‍💻 Contributors All issue reports, feature requests, pull requests and GitHub stars are welcomed and much appreciated. - [@barnard-b](https://github.com/barnard-b) ## ✍️ Author Elai Zuberman ## 📃 License `AlertToast` is available under the MIT license. See the [LICENSE](https://github.com/elai950/AlertToast/blob/master/LICENSE.md) file for more info. --- - [Jump Up](#-overview) ", Assign "at most 3 tags" to the expected json: {"id":"10830","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"