Creating custom Link preview instead of LPLinkView with SwiftUI.

Hello! I want to share with you use cases, which can be useful for some who wants create customizable link previews from URL.

So in generally to create Preview link with SwiftUI we going with UIViewRepresentable, adopted it with makeUIView, updateUIView to LPLinkView. I’m not share this code there, you can find it very quickly.
The main problem was in customizing our preview. For example we cannot set a right dimensions for our frame or for example we can’t change positions of image view, title, url. I know for someone it can be enough but when it comes from design team or with custom dimensions we have to deal with it.

Now I want to share blueprint, the main goal was just to load preview from URL and set the custom dimension, image position, etc. Also you can go further (if you find it necessary) and add open link action.

We can start with example of ObservableObject, it will be something like View Model or Preview Manager for our view. Firstly we need import necessary libraries:

In our object I place some published properties, custom init from our string value:

Next our main part, so if we go directly with LPLinkView and UIViewRepresentable, after receiving metadata from URL we linking it with LPLinkView.metadata property and our view ready to show. Nice, but we want some custom.

Okay, in that case we need to implement only LPMetadataProvider object, fetch metadata from our previewURL and finally set it with our properties:

Dont forget to put this method in our init:

Already you can notice, that we need to do some steps to take image from our imageProvider (that is NSItemProviver object). There is some general implementation, you can use your own:

Nice, done with our view model. Now we can implement it with our PreviewLinkView. I prepared a little example where we place our image, title and link from our URL. Firstly I added a ObservedObject which is our view model for today, generally combination with HStack & VStack.

As we can see, our result is perfect, neat and fully customizable. You can put elements in way you want.

Thanks for reading, I hope you find it interesting and useful, good luck! :)

Related posts:

Is your startup planning to offer stock options to employees? Then getting a 409A valuation is essential. If your company is planning to offer stock options to employees or contractors (as my new…

It is a very nice problem as it touches the most important topics in algorithms such as recursion, backtracking. This may explain why this problem is a hot interview problem. We pick up num from 0 to…

This is something I have learned through experience by working on problems with large scale input. Top down approach in recursion is very intuitive, and no wonder preferred by most programmers, while…