T
TanStack•8mo ago
passive-yellow

How to props typesafety for a LinkCard component?

Basically I want my <LinkCard> component to error the same way <Link> from @tanstack/router if you fail to give it a to="" prop 
function LinkCard({ className, ...props }: LinkComponentProps) {
  return (
    <Link
      data-slot="card"
      className={cn(
        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
        className,
      )}
      {...props}
    />
  );
}
function LinkCard({ className, ...props }: LinkComponentProps) {
  return (
    <Link
      data-slot="card"
      className={cn(
        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
        className,
      )}
      {...props}
    />
  );
}
This works, but it doesn't have the same level of typesafety as the native <Link> tag.
No description
No description
3 Replies
passive-yellow
passive-yellowOP•8mo ago
now params for $me is included despite not being in the route
wise-white
wise-white•8mo ago
this should help https://tanstack.com/router/latest/docs/framework/react/guide/type-utilities#type-checking-link-options-with-validatelinkoptions
Type Utilities | TanStack Router React Docs
Most types exposed by TanStack Router are internal, subject to breaking changes and not always easy to use. That is why TanStack Router has a subset of exposed types focused on ease of use with the in...
passive-yellow
passive-yellowOP•8mo ago
that works until I want my until i add children to my component. nvm, I figured it out by just adding children: React.ReactNode to the props! thanks a lot!

Did you find this page helpful?