Extracting Link props while retaining type safety

Hi, everyone. Need some help regarding utilizing router's typesafety in custom components.
So as per docs, I was successfully able to create a custom link with same type safety as standard Link of tanstack.

So far my code something like this:-

const BasicLinkComponent = forwardRef<HTMLAnchorElement, BasicLinkProps>(
  (props, ref) => {
    return <a ref={ref} {...props} />;
  },
);

const CreatedLinkComponent = createLink(BasicLinkComponent);

export const CustomLink: LinkComponent<typeof BasicLinkComponent> = props => {
  return (
    <Headless.DataInteractive>
      <CreatedLinkComponent {...props} />
    </Headless.DataInteractive>
  );

const BasicLinkComponent = forwardRef<HTMLAnchorElement, BasicLinkProps>(
  (props, ref) => {
    return <a ref={ref} {...props} />;
  },
);

const CreatedLinkComponent = createLink(BasicLinkComponent);

export const CustomLink: LinkComponent<typeof BasicLinkComponent> = props => {
  return (
    <Headless.DataInteractive>
      <CreatedLinkComponent {...props} />
    </Headless.DataInteractive>
  );

Now I want the same type safety in other components that internally use my CustomLink. Eg: PaginationPage

But I am unable to extract CustomLink props type while retaining its type safety.

If I try something like:

type CustomLinkProps =  ComponentProps<typeof CustomLink>;

type CustomLinkProps =  ComponentProps<typeof CustomLink>;

This doesn't enforce typing properly for 'to' & 'search' props. Any idea how to achieve this?

TanStack•14mo ago•

9 replies

hurt-tomato

Extracting Link props while retaining type safety

const BasicLinkComponent = forwardRef<HTMLAnchorElement, BasicLinkProps>(
  (props, ref) => {
    return <a ref={ref} {...props} />;
  },
);

const CreatedLinkComponent = createLink(BasicLinkComponent);

export const CustomLink: LinkComponent<typeof BasicLinkComponent> = props => {
  return (
    <Headless.DataInteractive>
      <CreatedLinkComponent {...props} />
    </Headless.DataInteractive>
  );

const BasicLinkComponent = forwardRef<HTMLAnchorElement, BasicLinkProps>(
  (props, ref) => {
    return <a ref={ref} {...props} />;
  },
);

const CreatedLinkComponent = createLink(BasicLinkComponent);

export const CustomLink: LinkComponent<typeof BasicLinkComponent> = props => {
  return (
    <Headless.DataInteractive>
      <CreatedLinkComponent {...props} />
    </Headless.DataInteractive>
  );

type CustomLinkProps =  ComponentProps<typeof CustomLink>;

type CustomLinkProps =  ComponentProps<typeof CustomLink>;

This doesn't enforce typing properly for 'to' & 'search' props. Any idea how to achieve this?

Extracting Link props while retaining type safety

Similar Threads

Extracting Link props while retaining type safety

Similar Threads

Similar Threads

Similar Threads