Custom Component for Link

[tayelno]

import { Link as _Link } from '@tanstack/router';
import { ComponentPropsWithRef } from 'react';

/**
 * Issue with this component is that it doesn't have a type for the props
 * that allow correct typesafe values of `to` props
 * it also makes all other props like search and params required for all links
 */
type LinkProps = ComponentPropsWithRef<typeof _Link>; // <--- WHAT DO I PUT HERE
const Link = (props: LinkProps ) => {
  return (
    <_Link
      {...props}
      activeProps={{ className: 'text-blue-600' }}
      className={props.className}
    />
  );
};
export { Link };

Basically I want to make a custom link component so that I can reuse throughout the app, so that I dont need to add activeProps={{ className: 'text-blue-600' }} forEach and every link that I have. And at the same time keep all the capabilities of the original Link component and be typesafe.

Sorry if it was answered before I tried searching the discussions did not find any clear solution.

[queicherius]

I'm also very interested in what the "official solution" to this is. In my case, I am using a component system that has a Link component that just expects an href / mouse event handlers.

There are other discussions like this one (but that only makes to typesafe, and not search / params), and this one (but that is from over half a year ago and does not work anymore).

I also wrote my own solution based on copy/pasting and extending the types here, but this feels very ugly and (at least in my very brief test) blows up the TypeScript type check time by 2x.

import { omit } from '@devoxa/flocky'
import {
  Link as LinkFromPalette,
  LinkDefaultProps as LinkFromPaletteDefaultProps,
  LinkProps as LinkFromPaletteProps,
} from '@devoxa/palette'
import {
  LinkPropsOptions,
  MakeLinkOptions,
  RegisteredRoutesInfo,
  useLinkProps,
} from '@tanstack/router'
import React from 'react'

export type NextLinkProps = LinkPropsOptions & Omit<LinkFromPaletteProps, 'href' | 'navigate'>

export function Internal__NextLink(props: NextLinkProps) {
  const linkProps = useLinkProps(props as LinkPropsOptions)

  return (
    <LinkFromPalette
      {...omit(linkProps, ['color'])}
      {...props}
      // The props overwrite the "href" (it's defaulting to "#" because we use "to")
      href={linkProps.href}
    />
  )
}

Internal__NextLink.defaultProps = LinkFromPaletteDefaultProps

// Taken from the internal type definitions of @tanstack/react-router
interface LinkFn<
  TDefaultFrom extends RegisteredRoutesInfo['routePaths'] = '/',
  TDefaultTo extends string = '',
> {
  <
    TFrom extends RegisteredRoutesInfo['routePaths'] = TDefaultFrom,
    TTo extends string = TDefaultTo,
  >(
    props: MakeLinkOptions<TFrom, TTo> &
      React.RefAttributes<HTMLAnchorElement> &
      NextLinkProps & { href?: never }
  ): JSX.Element
  defaultProps: typeof LinkFromPaletteDefaultProps
}

export const NextLink = Internal__NextLink as LinkFn

[do-kevin]

Thank you for linking #635 (comment). I was wondering how I would extract that type.

[KiwiKilian]

My current solution for 0.0.1-beta.168 looks like this. It seems to keep all typesafety from Link and is analog to #429 (reply in thread).

type ButtonLinkProps<TTo extends string = ''> = MakeLinkOptions<RoutePaths<RegisteredRouter['routeTree']>, TTo> & {
  className?: string;
};

export const ButtonLink = <TTo extends string = ''>({ className, ...props }: ButtonLinkProps<TTo>) => (
  <Link className={clsx(styles.button, className)} {...(props as any)} />
);

[erickarnis-tb]

Hi, is there any way to do this without the any?

[KiwiKilian]

Which any? Last I tried it was completely typesafe.

[erickarnis-tb]

There's an any in the code posted above.

[KiwiKilian]

Ah sorry, I missed the props as any. I don't know a solution for this.

[Jarzka]

It seems that MakeLinkOptions is not available anymore?

[helmturner]

I have a different use-case that isn't solved by this workaround, as mentioned in #141 (comment)

Basically, I want to do without the a element altogether so I can try using this in React Native (unless there are other dom bindings that would prevent this)

[Jarzka]

Did you find a solution? I'm also interested in using custom component for links. I'm missing the buildLink function, which was available in earlier versions. It was an easy solution to build in-app links using custom components: #1215

[Jarzka]

I found a solution how to type my custom Link component wrapper: https://stackoverflow.com/questions/77788907/how-to-wrap-a-link-component-with-type-safety

I think writing a custom wrapper for the TanStack Link component is such a common scenario that there should be a documentation on how to do it (i.e. how to type it correctly)

[Jarzka]

Since creating a custom wrapper component for Link with working typing seems to be a) difficult, b) easy to break with version updates and c) not officially supported (not mentioned in the documentation), we decided to create our links using the official Link component, but by also wrapping it with our own StyledLink component. More information: #1271 (comment)

[Ambroos]

If anyone lands on this, there's the relatively recent experimental createLink exported in TSR that does exactly what you need.

For example, const DivLink = createLink('div') or const ComponentLink = createLink(Component). It's not documented yet.