stuck schooner
Hey there,
I'm trying to build the pagination for my app and I struggle more than I should. 😅
I use the pagination components from Shadcn/UI and I replaced the a element from PaginationLink with Link from @tanstack/react-router.
It works as expected if I concatenate stuff, but if I try to use the search prop, I get a type error even though it works.
Can anyone help me, please? Thanks!
granite trail
you can create a custom typed link component using
stuck schooner
you can create a custom typed link component using
https://tanstack.com/router...
Thanks for the reply! Not sure that is the solution though in my case. I updated the type and it seems to work now. Or am I wrong?
type PaginationLinkProps = {
isActive?: boolean;
} & Pick<ButtonProps, "size"> &
LinkProps &
LinkComponentProps<"a">;
can you provide a complete minimal example by forking an existing router example on stackblitz?
stuck schooner
can you provide a complete minimal example by forking an existing router example...
void timber
Hey! I've stumbled upon this problem myself and I've managed to fix it thanks to the custom link component thingy as per the docs, but I still got a problem when it comes to passing Link props type to <PaginationPrevious> and <PaginationNext> components. Honestly, I'm not sure if it's even viable to do so. Would love to get some help/clarification on this topic.
Here's the complete minimal reproduction of the issue, see line 65: https://stackblitz.com/edit/tanstack-router-qyn239bg?file=src%2Froutes%2Fposts.tsx
@granite trail I'd appreciate if you could take a look at this 🙏
granite trail
you could try using ValidateLinkOptions instead
here is an example how that is used https://github.com/EskiMojo14/retrospecs-start/commit/60f029e8d607029ffb49228d9f467527ab1e4e12#diff-cc7ce6ccb2222dc68e77f7994283218431103979a5050cf6b5ccdbcf5d193d3eR69
void timber
here is an example how that is used https://github.com/EskiMojo14/retrospecs-sta...
Not really sure how to apply this in my example. I've did some more digging before you replied and I found that LinkComponentProps fixes the types but I'm not sure how valid this approach is.
I've replaced:
type PaginationLinkProps = {
isActive?: boolean
} & Pick<ButtonProps, "size"> &
React.ComponentProps<"a">
with:
type PaginationLinkProps = {
isActive?: boolean
} & Pick<ButtonProps, 'size'> &
LinkComponentProps
How valid is this type?
granite trail
cc @covert patrol
covert patrol
Afk but i think this is possible with ValidateLinkOptions
type PaginationLinkProps<TOptions> = ValidateLinkOptions<TOptions> & Pick<ButtonProps, 'size'>
void timber
Afk but i think this is possible with `ValidateLinkOptions`
`type PaginationLi...
I might be doing something wrong here with the TOptions but doesn't seem to be working. I'll patiently wait till you're back by your computer. In the meantime, will use the LinkComponentProps since at least I can keep on coding
covert patrol
Can you show an example of how you are using it?
void timber
Can you show an example of how you are using it?
Actually after more tries and the GitHub link shared by Manuel I've managed to make it work. Here's the diff: https://www.diffchecker.com/y0hcRaDK/
But this casting props as any is just awful
What exactly is the LinkComponentProps though? With that type, there's no need for casting props as any but I'm not comfortable using something that I'm not fully understanding so would appreciate some input here
covert patrol
LinkComponentProps is an internal type used for props of Link. Without type parameters there will be no narrowing to a specific route for params or search
ValidateLinkOptions should get you the correct type safety with only one type parameter.
It focuses more on type safety of a public interface, custom.Link for example but given generic functions/components it can be hard to eliminate all required type assertions
The type assertions should only be required internally
And as never can usually work if you dont like any