Rendering Components

When using JudoView, select specific Components from your Judo file by using its component(_:) modifier.

Usage

Components are re-usable UI elements that can be composed together to form larger UIs, both within a Judo design file or directly within code. They are effectively SwiftUI views, and the JudoView SwiftUI view in the Judo SDK renders them into real views that you can embed within your own SwiftUI views.

JudoView's behaviour is customizable using modifiers similar to that of other SwiftUI views.

The component(_:) modifier allows you to select which component within your Judo file is to be rendered by the view.

For example, for the following component entitled Discover/Content on your Judo canvas:

You would use the following SwiftUI to render it:

struct ContentCardView: View {
    var body: some View {
        // Main.judo
        JudoView("Main")
            .component("Discover/Content")
    }
}

Organize your component identifiers with strong typing

component(_:)'s parameter is actually a ComponentName value, which while remaining easily representable by default by a string, allows you to explicitly define your component identifiers in a more type-safe way.

This allows for a convenient way to organize your component identifiers.

extension ComponentName {
    static let discoverContent = ComponentName("Discover/Content")
}

// and then, within your SwiftUI view:
JudoView("Main")
    .component(.discoverContent)