Advanced Patterns 11 exercises

The `as` Prop with `forwardRef`

Here we have an UnwrappedLink component that uses our trick to make the default prop work. It also makes use of the ForwardedRef component we worked on earlier:

export const UnwrappedLink = <TAs extends ElementType>(
props: {
as?: TAs;
} & ComponentPropsWithoutRef<ElementT

Loading exercise


00:00 Okay, folks, we are at the finale of the ASPROP. This is the final boss. This is an unwrapped link component which is using our trick to make the default prop work, to make ASPROP work, and it's now being combined with forward ref too.

00:17 So we have a ref which is a forwarded ref, any, here, and we're now wrapping it with forward ref and we end up with a link component. Now, this one is way too hard for you to find. Way too hard. It involves forward ref, like the fixed version of forward ref that we've

00:36 had from a previous exercise. It involves a distributed omit as well, because for various reasons the omit didn't work, which I'll show you in a second. So please do not feel bad if you do not find this at all, because, I mean, there's just so much here. Like, part of the problem here

00:56 is that we need to basically say, okay, we have ref here, which we need to basically be able to pass it the correct ref, because currently ref is being inferred as unknown, okay? And I think that's mainly because we're using this component props without ref here. So again, we might need

01:10 to fiddle with this because we also need to get the kind of refs working too. There's just so much here that was really hard for me to get right. I had to ask for a lot of help, but I think I found a solution that really does work for all of these different use cases. And of course we

01:28 need to make it work with forward ref. Oh god, it's just so stressful. Anyway, I think that's all the information I'm going to give you. Good luck if you want to have a go at this yourself, but feel free to skip to the solution and save yourself the pain that I went through.