(SOLVED) How to make a custom link with an active className
I've got this component, and I get the following type error when trying to add active props. It's a massive error, looks like AI describes it as a complex union type that I'm not narrowing.
This is a modified example from the docs, what's the right way to do this?
Type '{ preload: "intent"; activeProps: { className: string; } | { icon?: ReactNode; ref?: LegacyRef<never> | undefined; download?: any; hrefLang?: string | undefined; ... 267 more ...; key?: Key | ... 1 more ... | undefined; } | { ...; }; } & Omit<...>' is not assignable to type 'IntrinsicAttributes & LinkComponentReactProps<ForwardRefExoticComponent<BasicLinkProps & RefAttributes<HTMLAnchorElement>>> & ... 8 more ... & LinkPropsChildren'.
Type '{ preload: "intent"; activeProps: { className: string; } | { icon?: ReactNode; ref?: LegacyRef<never> | undefined; download?: any; hrefLang?: string | undefined; ... 267 more ...; key?: Key | ... 1 more ... | undefined; } | { ...; }; } & Omit<...>' is not assignable to type 'MakeToRequired<TRouter, TFrom, TTo>'.ts(2322)
Type '{ preload: "intent"; activeProps: { className: string; } | { icon?: ReactNode; ref?: LegacyRef<never> | undefined; download?: any; hrefLang?: string | undefined; ... 267 more ...; key?: Key | ... 1 more ... | undefined; } | { ...; }; } & Omit<...>' is not assignable to type 'IntrinsicAttributes & LinkComponentReactProps<ForwardRefExoticComponent<BasicLinkProps & RefAttributes<HTMLAnchorElement>>> & ... 8 more ... & LinkPropsChildren'.
Type '{ preload: "intent"; activeProps: { className: string; } | { icon?: ReactNode; ref?: LegacyRef<never> | undefined; download?: any; hrefLang?: string | undefined; ... 267 more ...; key?: Key | ... 1 more ... | undefined; } | { ...; }; } & Omit<...>' is not assignable to type 'MakeToRequired<TRouter, TFrom, TTo>'.ts(2322)
import { createLink, type LinkComponent } from "@tanstack/react-router";
import { forwardRef, type ReactNode } from "react";
import { cn } from "@/lib/utils";
interface BasicLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
icon: ReactNode;
}
const BasicLinkComponent = forwardRef<HTMLAnchorElement, BasicLinkProps>(
({ children, icon, className, ...props }, ref) => {
return (
<a
ref={ref}
className={cn("flex items-center gap-2 px-3 py-2", className)}
{...props}
>
{icon}
{children}
</a>
);
},
);
const CreatedLinkComponent = createLink(BasicLinkComponent);
export const SettingsLink: LinkComponent<typeof BasicLinkComponent> = ({
className,
activeProps,
...props
}) => {
return (
<CreatedLinkComponent
preload={"intent"}
activeProps={{
className: cn(
"text-blue-600 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 font-medium transition-colors duration-200",
className,
),
...activeProps,
}}
{...props}
/>
);
};
import { createLink, type LinkComponent } from "@tanstack/react-router";
import { forwardRef, type ReactNode } from "react";
import { cn } from "@/lib/utils";
interface BasicLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
icon: ReactNode;
}
const BasicLinkComponent = forwardRef<HTMLAnchorElement, BasicLinkProps>(
({ children, icon, className, ...props }, ref) => {
return (
<a
ref={ref}
className={cn("flex items-center gap-2 px-3 py-2", className)}
{...props}
>
{icon}
{children}
</a>
);
},
);
const CreatedLinkComponent = createLink(BasicLinkComponent);
export const SettingsLink: LinkComponent<typeof BasicLinkComponent> = ({
className,
activeProps,
...props
}) => {
return (
<CreatedLinkComponent
preload={"intent"}
activeProps={{
className: cn(
"text-blue-600 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 font-medium transition-colors duration-200",
className,
),
...activeProps,
}}
{...props}
/>
);
};
2 Replies
optimistic-gold•3mo ago
export const SettingsLink: LinkComponent<typeof BasicLinkComponent> = ({
...props
}) => {
return (
<CreatedLinkComponent
preload={"intent"}
activeProps={{
className: cn(
"text-blue-600 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 font-medium transition-colors duration-200",
props.className,
),
...props.activeProps,
}}
{...props}
/>
);
};
export const SettingsLink: LinkComponent<typeof BasicLinkComponent> = ({
...props
}) => {
return (
<CreatedLinkComponent
preload={"intent"}
activeProps={{
className: cn(
"text-blue-600 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 font-medium transition-colors duration-200",
props.className,
),
...props.activeProps,
}}
{...props}
/>
);
};
foreign-sapphireOP•3mo ago
Thank you so much. I thought that by destructuring
activeProps, props would have everything else except activeProps. Guess I'll have to brush up on that more.