T
TanStack•4mo ago
correct-apricot

Exclude children from custom link component

Hey 👋 Is it possible to exclude children from a custom link component created with createLink()? We have a IconLink component that accepts a label property of type string and we don't want to accept children.
5 Replies
deep-jade
deep-jade•4mo ago
Wouldnt the below work?
const InnerIconLink = createLink(...)

const IconLink = InnerIconLink as Omit<typeof InnerIconLink, 'children'>
const InnerIconLink = createLink(...)

const IconLink = InnerIconLink as Omit<typeof InnerIconLink, 'children'>
correct-apricot
correct-apricotOP•4mo ago
Unfortunately not, this completely breaks type-safety of the link options.
correct-apricot
correct-apricotOP•4mo ago
It would be something like this but we can't do this because of the inferred generic link options.
type PropsWithoutChildren = Omit<ComponentProps<LinkComponent<typeof BasicLinkComponent>>, 'children'>;
const CustomLink = CreatedLinkComponent as ComponentType<PropsWithoutChildren>;
type PropsWithoutChildren = Omit<ComponentProps<LinkComponent<typeof BasicLinkComponent>>, 'children'>;
const CustomLink = CreatedLinkComponent as ComponentType<PropsWithoutChildren>;
Playground: https://tsplay.dev/wOy87m
TS Playground - An online editor for exploring TypeScript and JavaS...
The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.
correct-apricot
correct-apricotOP•4mo ago
I can remove createLink() and instead manually type the component + props using ValidateLinkOptions and then make an intersection type with { children?: never }. The problem is that the component then can't be used with linkOptions(). It would be nice to have something like linkOptions() / ValidateLinkOptions just for the actual route props (to, search, params, ...) without the props from an anchor element.
Type Utilities | TanStack Router React Docs
Most types exposed by TanStack Router are internal, subject to breaking changes and not always easy to use. That is why TanStack Router has a subset of exposed types focused on ease of use with the in...
other-emerald
other-emerald•4mo ago
cc @Chris Horobin

Did you find this page helpful?