TanStackT
TanStack•4mo ago•
1 reply
colossal-harlequin

customLink with React Aria

I understand that the documentation approach suggest to wrap MyCustomLink that returns the AriaLink with createLink.

What I want to know is if I need to do that with whatever component that uses AriaLink under the hood.

E.x let's take the pagination from Intent UI (1st image).

All those components return an AriaLink.

What I can do is wrap each on of those with createLink and export this new one like such (2nd image) which works fine.

What I would like to do is just touch the Link inside and let those components inherit the Link props.

I don't know how to take those props,
I tried this but when I extend from the Pagination level and use them one level above (on the parent) I don't get typesafety

interface AriaLinkProps extends LinkPrimitiveProps {
    ref?: React.RefObject<HTMLAnchorElement>;
}

const AriaLink = ({ className, ref, ...props }: AriaLinkProps) => {
    return (
        <LinkPrimitive
            ref={ref}
            className={cx(
                [
                    'font-medium text-(--text)',
                    'outline-0 outline-offset-2 transition-[color,_opacity] focus-visible:outline-2 focus-visible:outline-ring forced-colors:outline-[Highlight]',
                    'disabled:cursor-default disabled:text-muted-fg forced-colors:disabled:text-[GrayText]',
                    'href' in props && 'cursor-pointer',
                ],
                className,
            )}
            {...props}
        />
    );
};
const Link = createLink(AriaLink);
type LinkProps = ComponentProps<typeof Link>;

export type { LinkProps };
export { Link };
Screenshot_2025-10-06_at_15.15.37.png
Was this page helpful?