brilliant-lime

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...

TanStack•16mo ago

brilliant-lime

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

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...

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads