T
TanStack•3mo ago
absent-sapphire

Router Integration With Tailwind Catalyst Link Component

I am struggling to get typescript link component working properly with the Tanstack router (I am a beginner when it comes to typescript).
I have updated link.tsx to the following 
import * as Headless from '@headlessui/react';
import React, { forwardRef } from 'react';
import { Link as TanstackLink, type LinkProps } from '@tanstack/react-router';

export const Link = forwardRef(function Link(
  props: LinkProps & React.ComponentPropsWithoutRef<'a'>,
  ref: React.ForwardedRef<HTMLAnchorElement>,
) {
  return (
    <Headless.DataInteractive>
      <TanstackLink {...props} ref={ref} />
    </Headless.DataInteractive>
  );
});
import * as Headless from '@headlessui/react';
import React, { forwardRef } from 'react';
import { Link as TanstackLink, type LinkProps } from '@tanstack/react-router';

export const Link = forwardRef(function Link(
  props: LinkProps & React.ComponentPropsWithoutRef<'a'>,
  ref: React.ForwardedRef<HTMLAnchorElement>,
) {
  return (
    <Headless.DataInteractive>
      <TanstackLink {...props} ref={ref} />
    </Headless.DataInteractive>
  );
});
But in any file that uses the Link component (eg. avatar) there is a typescript error on Headless.Button (see attachment). I also updated the Avatar file to reference "to" instead of href as is convention with tanstack router. Minimal reproduction: https://stackblitz.com/~/github.com/kpwn243/tanstack-catalyst?file=src/components/ui/avatar.tsx&view=editor
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?