swift 102 lines · 2 tabs

Custom SwiftUI view modifiers for reusability

Sofia Martinez Jan 2026

2 tabs

import SwiftUI

struct CardModifier: ViewModifier {
    var backgroundColor: Color = .white
    var cornerRadius: CGFloat = 12
    var shadowRadius: CGFloat = 5

    func body(content: Content) -> some View {
        content
            .padding()
            .background(backgroundColor)
            .cornerRadius(cornerRadius)
            .shadow(color: .black.opacity(0.1), radius: shadowRadius, x: 0, y: 2)
    }
}

struct LoadingModifier: ViewModifier {
    var isLoading: Bool

    func body(content: Content) -> some View {
        ZStack {
            content
                .disabled(isLoading)
                .blur(radius: isLoading ? 3 : 0)

            if isLoading {
                ProgressView()
                    .scaleEffect(1.5)
            }
        }
    }
}

struct PrimaryButtonStyle: ViewModifier {
    var isEnabled: Bool = true

    func body(content: Content) -> some View {
        content
            .font(.headline)
            .foregroundColor(.white)
            .frame(maxWidth: .infinity)
            .padding()
            .background(isEnabled ? Color.blue : Color.gray)
            .cornerRadius(10)
            .opacity(isEnabled ? 1.0 : 0.6)
    }
}

// Extension for convenience
extension View {
    func cardStyle(
        backgroundColor: Color = .white,
        cornerRadius: CGFloat = 12,
        shadowRadius: CGFloat = 5
    ) -> some View {
        modifier(CardModifier(
            backgroundColor: backgroundColor,
            cornerRadius: cornerRadius,
            shadowRadius: shadowRadius
        ))
    }

    func loading(_ isLoading: Bool) -> some View {
        modifier(LoadingModifier(isLoading: isLoading))
    }

    func primaryButtonStyle(enabled: Bool = true) -> some View {
        modifier(PrimaryButtonStyle(isEnabled: enabled))
    }
}

struct PostCardView: View {
    let post: Post
    @State private var isLoading = false

    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            Text(post.title)
                .font(.headline)

            Text(post.body)
                .font(.body)
                .lineLimit(3)

            HStack {
                Text(post.author.name)
                    .font(.caption)
                Spacer()
                Text(post.createdAt, style: .date)
                    .font(.caption)
                    .foregroundColor(.secondary)
            }

            Button("Read More") {
                isLoading = true
                // Navigate to detail
            }
            .primaryButtonStyle(enabled: !isLoading)
        }
        .cardStyle()
        .loading(isLoading)
    }
}

2 files · swift Explain with highlit

View modifiers encapsulate reusable styling and behavior in SwiftUI. Creating custom modifiers keeps views clean and promotes consistency. I define modifiers by conforming to the ViewModifier protocol, implementing body(content:) that transforms the content view. Common use cases include card styles, loading overlays, and form field styling. Extension methods on View provide convenient .cardStyle() syntax. Modifiers compose—apply multiple to build complex styles from simple building blocks. For conditional modifiers, I use the ternary operator or helper extensions. This pattern reduces code duplication and makes design system changes trivial—update one modifier to change all instances.

Related snips

swift

import Combine
import Foundation

class SearchViewModel: ObservableObject {
    @Published var searchQuery = ""
    @Published var results: [SearchResult] = []

Combine operators for data transformation

swift combine reactive

by Sofia Martinez 1 tab

swift

import SwiftUI

struct ContentView: View {
    @State private var username = ""
    @State private var isLoggedIn = false
    @StateObject private var viewModel = LoginViewModel()

SwiftUI declarative UI with state management

swift swiftui ios

by Sofia Martinez 2 tabs

erb

<h1>Products</h1>

<%= form_with url: products_path, method: :get,
              data: { turbo_frame: "products_list", turbo_action: "advance" } do |f| %>
  <div class="filters">
    <%= f.text_field :q, value: params[:q], placeholder: "Search products" %>

Frame navigation that targets a specific frame via form_with

rails hotwire turbo

by codesnips 3 tabs

swift

import Foundation
import UIKit

class ImageProcessor {
    // Background processing with main thread updates
    func processImage(_ image: UIImage, completion: @escaping (UIImage?) -> Void) {

Grand Central Dispatch for concurrency

swift gcd concurrency

by Sofia Martinez 1 tab

swift

import SwiftUI

enum Route: Hashable {
    case postDetail(id: Int)
    case userProfile(id: Int)
    case settings

Navigation patterns with NavigationStack

swift swiftui navigation

by Sofia Martinez 2 tabs

css

/* Interactive pseudo-classes */
a:link { color: blue; }
a:visited { color: purple; }
a:hover { text-decoration: underline; }
a:active { color: red; }
a:focus { outline: 2px solid orange; }

CSS pseudo-classes and pseudo-elements for advanced styling

css pseudo-classes pseudo-elements

by Alex Chang 2 tabs

Share this code

Here's the card — post it anywhere.

Custom SwiftUI view modifiers for reusability — share card

Link copied