Skip to content

Latest commit

 

History

History
212 lines (172 loc) · 7.21 KB

README.md

File metadata and controls

212 lines (172 loc) · 7.21 KB

PopupView Logo

Popups presentation made simple

Create beautiful and fully customisable popups in no time. Keep your code clean

Try demo we prepared


SwiftUI logo Platforms: iOS, iPadOS Release: 1.2.2 Swift Package Manager: Compatible License: MIT

Stars Follow us on Twitter Let's work together

Popup Examples


PopupView is a free and open-source library dedicated for SwiftUI that makes the process of presenting popups easier and much cleaner.

  • Improves code quality. Show your popup using the present() modifier. Hide the selected one with dismiss(). Simple as never.
  • Create any popup. We know how important customisation is; that's why we give you the opportunity to design your popup in any way you like.
  • Designed for SwiftUI. While developing the library, we have used the power of SwiftUI to give you powerful tool to speed up your implementation process.

Getting Started

✋ Requirements

Platforms Minimum Swift Version
iOS 15+, iPadOS 15+ 5.7

⏳ Installation

The Swift package manager is a tool for automating the distribution of Swift code and is integrated into the swift compiler.

Once you have your Swift package set up, adding PopupView as a dependency is as easy as adding it to the dependencies value of your Package.swift.

dependencies: [
    .package(url: "https://github.com/Mijick/PopupView.git", branch(“main”))
]

Usage

1. Setup library

Inside your @main structure call the implementPopupView method

  var body: some Scene {
        WindowGroup(content: ContentView().implementPopupView)
  }

2. Declare a structure of your popup

The library provides an ability to present your custom view in three predefinied places - Top, Centre and Bottom.
In order to present it, it is necessary to confirm to one of the protocols during your view declaration:

  • TopPopup - presents popup view from the top
  • CentrePopup - presents popup view from the center
  • BottomPopup - presents popup view from the bottom

So that an example view you want to present will have the following declaration:

struct BottomCustomPopup: BottomPopup {
    ...
}

3. Provide identifier of your popup

Set the id parameter to control the uniqueness of the views being presented.

Your structure should now look like the following:

struct BottomCustomPopup: BottomPopup {
    let id: String = "your_id"
    ...
}

4. Implement createContent() method. It's used instead of the body property, and declares the design of the popup view

struct BottomCustomPopup: BottomPopup {
    let id: String = "your_id"
    
    
    func createContent() -> some View {
        HStack(spacing: 0) {
            Text("Witaj okrutny świecie")
            Spacer()
            Button(action: dismiss) { Text("Dismiss") } 
        }
        .padding(.vertical, 20)
        .padding(.leading, 24)
        .padding(.trailing, 16)
    }
    ...
}

5. Implement configurePopup(popup: Config) -> Config method to setup UI of presented view Each protocol has its own set of configuration type

struct BottomCustomPopup: BottomPopup {
    let id: String = "your_id"
    
    
    func createContent() -> some View {
        HStack(spacing: 0) {
            Text("Witaj okrutny świecie")
            Spacer()
            Button(action: dismiss) { Text("Dismiss") } 
        }
        .padding(.vertical, 20)
        .padding(.leading, 24)
        .padding(.trailing, 16)
    }
    func configurePopup(popup: BottomPopupConfig) -> BottomPopupConfig {
        popup
            .horizontalPadding(20)
            .bottomPadding(42)
            .activePopupCornerRadius(16)
            .stackedPopupsCornerRadius(4)
    }
    ...
}

6. Present your popup from any place you want!

Just call BottomCustomPopup().present() from the selected place

struct SettingsViewModel {
    ...
    func saveSettings() {
        ...
        BottomCustomPopup().present()
        ...
    }
    ...
}

7. Closing popups

There are two methods to do so:

  • By calling one of the methods dismiss, dismiss(_ popup: Popup.Type), dismissAll inside the popup you created
struct BottomCustomPopup: BottomPopup {
    ...
    func createButton() -> some View {
        Button(action: dismiss) { Text("Tap to close") } 
    }
    ...
}
  • By calling one of three static methods of PopupManager:
    • PopupManager.dismiss()
    • PopupManager.dismiss(id: "some_id") where id is the identifier of the popup you want to close
    • PopupManager.dismiss(_ popup: Popup.Type) where popup is the popup you want to close
    • PopupManager.dismissAll()

Try our demo

See for yourself how does it work by cloning project we created

License

PopupView is released under the MIT license. See LICENSE for details.