TanStack•4mo ago•

6 replies

technical-ivory

Type conflict between TanStack Router's disabled and React Aria's isDisabled props when using create

reacttypescript

I'm integrating TS Router with React Aria Components (RAC). I'm creating a custom

ButtonLink

ButtonLink

component using

createLink

createLink

wrapper around React Aria's Link component.
The issue is that

createLink

createLink

injects a

disabled

disabled

prop from TS Router, which conflicts with React Aria's

isDisabled

isDisabled

prop. This allows both props to be used simultaneously, which creates confusion and inconsistency in the API.

<ButtonLink to="/">Home</ButtonLink> // ✅ Works
<ButtonLink to="/" isDisabled>Home</ButtonLink> // ✅ Works (RAC prop)
<ButtonLink to="/" disabled>Home</ButtonLink> // ⚠️ Also works, but i want to omit this (TS Router prop)

<ButtonLink to="/">Home</ButtonLink> // ✅ Works
<ButtonLink to="/" isDisabled>Home</ButtonLink> // ✅ Works (RAC prop)
<ButtonLink to="/" disabled>Home</ButtonLink> // ⚠️ Also works, but i want to omit this (TS Router prop)

Expected Behavior
I want to only allow

isDisabled

isDisabled

(React Aria's prop) and remove disabled from the type definition, so TypeScript throws an error if someone tries to use it:

<ButtonLink to="/" isDisabled>Home</ButtonLink> // ✅ Valid with my expected
<ButtonLink to="/" disabled>Home</ButtonLink> // ❌ Should show TypeScript error

<ButtonLink to="/" isDisabled>Home</ButtonLink> // ✅ Valid with my expected
<ButtonLink to="/" disabled>Home</ButtonLink> // ❌ Should show TypeScript error

What I've Tried
I attempted to use Omit to remove the

disabled

disabled

prop, but this breaks the router's path props and search params validation.

export const ButtonLink = createLink(BaseButtonLink) as ComponentType
  Omit<ComponentProps<LinkComponent<(props: ButtonLinkProps) => ReactNode>>, "disabled">
>;

export const ButtonLink = createLink(BaseButtonLink) as ComponentType
  Omit<ComponentProps<LinkComponent<(props: ButtonLinkProps) => ReactNode>>, "disabled">
>;

Minimal Reproducible Example
Stackblitz: http://stackblitz.com/edit/vitejs-vite-gyf8388g

Question
How can I properly omit the

disabled

disabled

prop from the

createLink

createLink

return type while preserving TS Router's type inference for

to

to

search

search

, and other routing-related props?
Any guidance would be greatly appreciated. Thanks!

StackBlitzDavid Bownie

Vitejs - Vite (duplicated) - StackBlitz

Next generation frontend tooling. It's fast!

TanStack•4mo ago•

6 replies

technical-ivory

Type conflict between TanStack Router's disabled and React Aria's isDisabled props when using create

reacttypescript

I'm integrating TS Router with React Aria Components (RAC). I'm creating a custom

ButtonLink

ButtonLink

component using

createLink

createLink

wrapper around React Aria's Link component.
The issue is that

createLink

createLink

injects a

disabled

disabled

prop from TS Router, which conflicts with React Aria's

isDisabled

isDisabled

prop. This allows both props to be used simultaneously, which creates confusion and inconsistency in the API.

<ButtonLink to="/">Home</ButtonLink> // ✅ Works
<ButtonLink to="/" isDisabled>Home</ButtonLink> // ✅ Works (RAC prop)
<ButtonLink to="/" disabled>Home</ButtonLink> // ⚠️ Also works, but i want to omit this (TS Router prop)

<ButtonLink to="/">Home</ButtonLink> // ✅ Works
<ButtonLink to="/" isDisabled>Home</ButtonLink> // ✅ Works (RAC prop)
<ButtonLink to="/" disabled>Home</ButtonLink> // ⚠️ Also works, but i want to omit this (TS Router prop)

Expected Behavior
I want to only allow

isDisabled

isDisabled

(React Aria's prop) and remove disabled from the type definition, so TypeScript throws an error if someone tries to use it:

<ButtonLink to="/" isDisabled>Home</ButtonLink> // ✅ Valid with my expected
<ButtonLink to="/" disabled>Home</ButtonLink> // ❌ Should show TypeScript error

<ButtonLink to="/" isDisabled>Home</ButtonLink> // ✅ Valid with my expected
<ButtonLink to="/" disabled>Home</ButtonLink> // ❌ Should show TypeScript error

What I've Tried
I attempted to use Omit to remove the

disabled

disabled

prop, but this breaks the router's path props and search params validation.

export const ButtonLink = createLink(BaseButtonLink) as ComponentType
  Omit<ComponentProps<LinkComponent<(props: ButtonLinkProps) => ReactNode>>, "disabled">
>;

export const ButtonLink = createLink(BaseButtonLink) as ComponentType
  Omit<ComponentProps<LinkComponent<(props: ButtonLinkProps) => ReactNode>>, "disabled">
>;

Minimal Reproducible Example
Stackblitz: http://stackblitz.com/edit/vitejs-vite-gyf8388g

Question
How can I properly omit the

disabled

disabled

prop from the

createLink

createLink

return type while preserving TS Router's type inference for

to

to

search

search

, and other routing-related props?
Any guidance would be greatly appreciated. Thanks!

StackBlitzDavid Bownie

Vitejs - Vite (duplicated) - StackBlitz

Next generation frontend tooling. It's fast!

Type conflict between TanStack Router's disabled and React Aria's isDisabled props when using create

Type conflict between TanStack Router's disabled and React Aria's isDisabled props when using create

Similar Threads

Similar Threads

Similar Threads