Issue with ref type when using createLink with Motion for React (prev Framer Motion)

Repro: https://codesandbox.io/p/devbox/github/KirillTregubov/tanstack-router-repro
Related discussion: https://github.com/TanStack/router/discussions/2375

I want to add this example to the docs, but I am getting a ref error inside my project so I would appreciate some help resolving this issue before showing others how to accomplish this.

When I define the motion link component:

import * as React from 'react'
import { createLink } from '@tanstack/react-router'
import { motion, type HTMLMotionProps } from 'motion/react'

const MotionLinkComponent = React.forwardRef<HTMLAnchorElement, HTMLMotionProps<'a'>>(
  (props, ref) => {
    return <motion.a {...props} ref={ref} />
  }
)

export const MotionLink = createLink(MotionLinkComponent);

import * as React from 'react'
import { createLink } from '@tanstack/react-router'
import { motion, type HTMLMotionProps } from 'motion/react'

const MotionLinkComponent = React.forwardRef<HTMLAnchorElement, HTMLMotionProps<'a'>>(
  (props, ref) => {
    return <motion.a {...props} ref={ref} />
  }
)

export const MotionLink = createLink(MotionLinkComponent);

import * as React from 'react'
import { createLink } from '@tanstack/react-router'
import { motion, type HTMLMotionProps } from 'motion/react'

const MotionLinkComponent = React.forwardRef<HTMLAnchorElement, HTMLMotionProps<'a'>>(
  (props, ref) => {
    return <motion.a {...props} ref={ref} />
  }
)

export const MotionLink = createLink(MotionLinkComponent);

import * as React from 'react'
import { createLink } from '@tanstack/react-router'
import { motion, type HTMLMotionProps } from 'motion/react'

const MotionLinkComponent = React.forwardRef<HTMLAnchorElement, HTMLMotionProps<'a'>>(
  (props, ref) => {
    return <motion.a {...props} ref={ref} />
  }
)

export const MotionLink = createLink(MotionLinkComponent);

And then consume it, passing in a ref:

import * as React from 'react'

function Component() {
  const linkRef = React.useRef<HTMLAnchorElement>(null)

  return (
    <MotionLink
      ref={linkRef}
    />
  )
}

import * as React from 'react'

function Component() {
  const linkRef = React.useRef<HTMLAnchorElement>(null)

  return (
    <MotionLink
      ref={linkRef}
    />
  )
}

import * as React from 'react'

function Component() {
  const linkRef = React.useRef<HTMLAnchorElement>(null)

  return (
    <MotionLink
      ref={linkRef}
    />
  )
}

import * as React from 'react'

function Component() {
  const linkRef = React.useRef<HTMLAnchorElement>(null)

  return (
    <MotionLink
      ref={linkRef}
    />
  )
}

I get a type error on the ref:

Type 'RefObject<HTMLAnchorElement>' is not assignable to type 'LegacyRef<LegacyRef<HTMLAnchorElement> | undefined> | undefined'.

Type 'RefObject<HTMLAnchorElement>' is not assignable to type 'LegacyRef<LegacyRef<HTMLAnchorElement> | undefined> | undefined'.

Type 'RefObject<HTMLAnchorElement>' is not assignable to type 'LegacyRef<LegacyRef<HTMLAnchorElement> | undefined> | undefined'.

Type 'RefObject<HTMLAnchorElement>' is not assignable to type 'LegacyRef<LegacyRef<HTMLAnchorElement> | undefined> | undefined'.

Thanks in advance!

GitHub

Using Tanstack Router Link with Framer Motion · TanStack router · D...

A couple months back I needed to animate a Link with Framer Motion. I have struggled with the implementation; trying both the createLink and LinkOptions APIs. I think I have finally landed on a ver...

No replies yetBe the first to reply to this messageJoin

Issue with ref type when using createLink with Motion for React (prev Framer Motion)

Similar Threads

Similar Threads

Similar Threads