T
TanStack•3w ago
extended-salmon

How to use ValidateLinkOptions to type a React Aria Component MenuItem that uses createLink?

Hi - I have been really struggling to get types to work correctly when creating a wrapper around a RAC MenuItem component. The docs say to use ValidateLinkOptions when passing link related params...the issue is that createLink returns the actual type of the component instead of converting it to an anchor tag, which means I get DOM event mismatch errors when spreading the props on the "link" such the one below since the original MenuItem component is a div...
Type 'MouseEventHandler<HTMLAnchorElement> | undefined' is not assignable to type 'MouseEventHandler<HTMLDivElement> | undefined'
...here is the example i was going off from the docs but combined with RAC and createLink. And here's a stackblitz playground that uses this code for convenience: https://stackblitz.com/edit/github-utepv35x?file=package.json,src%2Fmain.tsx,src%2Froutes%2Findex.tsx This one has stumped me all day, thanks to anyone in advance that can help here 
import {
  createLink,
  RegisteredRouter,
  ValidateLinkOptions,
} from '@tanstack/react-router';
import * as React from 'react';
import { MenuItem } from 'react-aria-components';

const MenuItemLink = createLink(MenuItem);

export interface HeaderLinkProps<
  TRouter extends RegisteredRouter = RegisteredRouter,
  TOptions = unknown
> {
  title: string;
  linkOptions: ValidateLinkOptions<TRouter, TOptions>;
}

export function HeadingLink<TRouter extends RegisteredRouter, TOptions>(
  props: HeaderLinkProps<TRouter, TOptions>
): React.ReactNode;
export function HeadingLink(props: HeaderLinkProps): React.ReactNode {
  return (
    <>
      <h1>{props.title}</h1>
      <MenuItemLink {...props.linkOptions} />
    </>
  );
}
import {
  createLink,
  RegisteredRouter,
  ValidateLinkOptions,
} from '@tanstack/react-router';
import * as React from 'react';
import { MenuItem } from 'react-aria-components';

const MenuItemLink = createLink(MenuItem);

export interface HeaderLinkProps<
  TRouter extends RegisteredRouter = RegisteredRouter,
  TOptions = unknown
> {
  title: string;
  linkOptions: ValidateLinkOptions<TRouter, TOptions>;
}

export function HeadingLink<TRouter extends RegisteredRouter, TOptions>(
  props: HeaderLinkProps<TRouter, TOptions>
): React.ReactNode;
export function HeadingLink(props: HeaderLinkProps): React.ReactNode {
  return (
    <>
      <h1>{props.title}</h1>
      <MenuItemLink {...props.linkOptions} />
    </>
  );
}
StackBlitz
Router Quickstart File Based Example - StackBlitz
Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?