boutique-swiftui

Boutique SwiftUI Integration

Use this skill when building SwiftUI views that display or react to data from Boutique's Store, @StoredValue, or @SecurelyStoredValue.

Displaying Store Items in a View

Inject an @Observable controller as @State and access items directly.

struct NotesListView: View {
    @State var notesController: NotesController

    var body: some View {
        List(self.notesController.notes) { note in
            Text(note.text)
        }
    }
}

Reacting to Store Changes with onChange

Use .onChange(of:initial:) to run code whenever the stored items change. The initial: true parameter ensures the closure also fires on first appearance.

struct NotesListView: View {
    @State var notesController: NotesController
    @State private var filteredNotes: [Note] = []

    var body: some View {
        List(self.filteredNotes) { note in
            Text(note.text)
        }
        .onChange(of: self.notesController.notes, initial: true) { _, newValue in
            self.filteredNotes = newValue.filter({ $0.text.count < 280 })
        }
    }
}

Waiting for Store to Load with onStoreDidLoad

When a Store is initialized synchronously, items load in a background task. Use onStoreDidLoad to show loading states or trigger actions once items are ready.

Callback-based

struct NotesView: View {
    @State var notesController: NotesController
    @State private var isLoaded = false

    var body: some View {
        Group {
            if self.isLoaded {
                NotesList(notes: self.notesController.notes)
            } else {
                ProgressView()
            }
        }
        .onStoreDidLoad(self.notesController.$notes, onLoad: {
            self.isLoaded = true
        }, onError: { error in
            print("Failed to load notes:", error)
        })
    }
}

Binding-based

struct NotesView: View {
    @State var notesController: NotesController
    @State private var hasLoaded = false

    var body: some View {
        Group {
            if self.hasLoaded {
                NotesList(notes: self.notesController.notes)
            } else {
                ProgressView()
            }
        }
        .onStoreDidLoad(self.notesController.$notes, update: self.$hasLoaded)
    }
}