T
TanStack•22h ago
other-emerald

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 };
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 };
No description
1 Reply
other-emerald
other-emeraldOP•22h ago
No description

Did you find this page helpful?