passive-yellow

Type-safety for list of params in custom component

I have a reusable sidebar component that takes in a list of items that each link somewhere. How should I type the props to allow type-safety for the list? I currently have this:

export interface SidebarNavProps<P extends RoutePaths<RegisteredRouter['routeTree']>> {
  from: P,
  sections: {
    label?: string;
    items: (LinkOptions<RegisteredRouter, P> &{
      title: string;
      icon?: React.ComponentType<{
        className?: string;
      }>;
      visible?: boolean; // default: true
    })[];
    visible?: boolean; // default: true
  }[];
  className?: string;
}

export interface SidebarNavProps<P extends RoutePaths<RegisteredRouter['routeTree']>> {
  from: P,
  sections: {
    label?: string;
    items: (LinkOptions<RegisteredRouter, P> &{
      title: string;
      icon?: React.ComponentType<{
        className?: string;
      }>;
      visible?: boolean; // default: true
    })[];
    visible?: boolean; // default: true
  }[];
  className?: string;
}

but when trying to use props.sections.items[number].to, I get:

Type '""' is not assignable to type '"/" | "." | "/admin" | "/403" | "/create-organization" | "/organizations/$orgId" | "/about" | "/organizations/$orgId/infrastructure-services" | "/organizations/$orgId/secrets" | ... 33 more ... | undefined'.ts(2322)

6 Replies

absent-sapphire•11mo ago

does this help? https://tanstack.com/router/latest/docs/framework/react/guide/custom-link

TanStack | High Quality Open-Source Software for Web Developers

Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.

passive-yellowOP•11mo ago

Thanks Manuel! I've read that and tried to wrap my head around it, but haven't been able to figure it out. The problem is in that my component SideNavBar is not one link, but it takes in a list as a param, and a Link needs to be created for all of the items in that list.

absent-sapphire•11mo ago

maybe https://tanstack.com/router/latest/docs/framework/react/api/router/linkOptions#link-options helps

TanStack | High Quality Open-Source Software for Web Developers

Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.

absent-sapphire•11mo ago

if not, please create a minimal complete example based on the existing examples

passive-yellowOP•11mo ago

I created a minimal example. I'm trying to figure out how to type this in order to narrow down the props here based on from.

GitHub

router-navbar-props/src/shared-layout.tsx at a691e766119bda15f8c426...

Contribute to mmurto/router-navbar-props development by creating an account on GitHub.

GitHub

router-navbar-props/src/routes/one.route.tsx at a691e766119bda15f8c...

Contribute to mmurto/router-navbar-props development by creating an account on GitHub.

absent-sapphire•11mo ago

what do you mean by "// Can I use this to narrow down the subroutes' to prop?" how do you expect from to "narrow down" to? is this about relative routing? do you want to use path and search params as well?

Gaming

Programming

Type-safety for list of params in custom component

Did you find this page helpful?