T
TanStack•10mo ago
frail-apricot

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);
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}
    />
  )
}
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'.
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...
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?