Placeholder for text using redacted()

By | August 25, 2024

In our view we can mark a text as placeholder, meaning that it gets rendered but masked out with gray to show it isn’t final content. This is provided through the redacted(reason:) modifier, along with an unredacted() modifier you can use to override redaction as needed

       Text("This text will appear as placeholder")
             .font(.title)
             .redacted(reason: .placeholder)
             .padding()

You can redact several things in your view at once, just by using redacted(reason:) on a container, like this:

     var body: some View {
         VStack {
             Text("This is placeholder text")
             Text("And so is this")
         }
         .font(.title)
         .redacted(reason: .placeholder)
     }

Apple has said that redaction is an additive process, meaning that if you add redaction reasons to both a parent and a child then they will combine. Right now there’s only .placeholder, but perhaps we’ll see pixellation or similar in the future?

You can also query any redaction reasons passed in from the environment like this:

    @Environment(\.redactionReasons) var redactionReasons
    let bio = "This text is long and appears in place of placeholders"

    var body: some View {
        if redactionReasons == .placeholder {
            Text("Loading…")
        } else {
            Text(bio)
                .redacted(reason: redactionReasons)
        }
    }

Leave a Reply

Your email address will not be published. Required fields are marked *