slow-yellow

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

TanStack•10mo ago

slow-yellow

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>
  );
});

Router Integration With Tailwind Catalyst Link Component

Similar Threads

Router Integration With Tailwind Catalyst Link Component

Similar Threads

Similar Threads

Similar Threads