slow-yellow

custom link inside component with asChild

i can create a customLink provided by the examples in the doc.
But when i want to use this link inside a custom component, lets say a shadCN dropdown menu item with asChild, it throws an error that i should provide an forward ref.

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Basic example

interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
  className?: string
}

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

const CreatedLinkComponent = createLink(BasicLinkComponent)

export const Link: LinkComponent<typeof BasicLinkComponent> = (props) => {
  return <CreatedLinkComponent {...props} />
}

interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
  className?: string
}

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

const CreatedLinkComponent = createLink(BasicLinkComponent)

export const Link: LinkComponent<typeof BasicLinkComponent> = (props) => {
  return <CreatedLinkComponent {...props} />
}

<DropdownMenuItem asChild>
  <Link
  >
    <EyeIcon />
    View
  </Link>
</DropdownMenuItem>

<DropdownMenuItem asChild>
  <Link
  >
    <EyeIcon />
    View
  </Link>
</DropdownMenuItem>

How can i make the createLink function work so my Link component accepts a ref?

const const Link = React.forwardRef<HTMLAnchorElement, LinkComponent<typeof BasicLinkComponent>>((props, ref) => {

const const Link = React.forwardRef<HTMLAnchorElement, LinkComponent<typeof BasicLinkComponent>>((props, ref) => {

This doesn't work.

TanStack•14mo ago

slow-yellow

custom link inside component with asChild

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Basic example

interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
  className?: string
}

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

const CreatedLinkComponent = createLink(BasicLinkComponent)

export const Link: LinkComponent<typeof BasicLinkComponent> = (props) => {
  return <CreatedLinkComponent {...props} />
}

interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
  className?: string
}

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

const CreatedLinkComponent = createLink(BasicLinkComponent)

export const Link: LinkComponent<typeof BasicLinkComponent> = (props) => {
  return <CreatedLinkComponent {...props} />
}

<DropdownMenuItem asChild>
  <Link
  >
    <EyeIcon />
    View
  </Link>
</DropdownMenuItem>

<DropdownMenuItem asChild>
  <Link
  >
    <EyeIcon />
    View
  </Link>
</DropdownMenuItem>

How can i make the createLink function work so my Link component accepts a ref?

const const Link = React.forwardRef<HTMLAnchorElement, LinkComponent<typeof BasicLinkComponent>>((props, ref) => {

const const Link = React.forwardRef<HTMLAnchorElement, LinkComponent<typeof BasicLinkComponent>>((props, ref) => {

This doesn't work.

custom link inside component with asChild

Similar Threads

custom link inside component with asChild

Similar Threads

Similar Threads

Similar Threads