Extending HTML anchor elements in React and TypeScript

Question

I am using typescript in a React project and I want to add tag's props. I can access the properties of the link element but not the properties a element. I am getting an error when the properties of the link tag use an a tag.

Is there an 'HTMLAElement' structure for an element a in React?

const MyComponent: FunctionComponent<React.LinkHTMLAttributes<HTMLLinkElement>> = (
  props: React.LinkHTMLAttributes<HTMLLinkElement>,
) => {
  return (
      <a {...props} className="mycomponent">  // When I use it with the <link> it doesn't give an error but I need <a>.
          MyComponent
      </a>
  );
};

Have a look at: developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement — user0101
– user0101, Commented May 27, 2020 at 9:05
I'm afraid it's not clear what you're asking here. Maybe you could get a colleague to help you write the question? But regarding "I could not see an 'HTMLAElement' structure": The type of an a element is HTMLAnchorElement. You can find those types in this list in the HTML5 specification. — T.J. Crowder
– T.J. Crowder, Commented May 27, 2020 at 9:05
Thank you 🙏 🙏 🙏 . I did not know that the element 'a' corresponds to 'anchor'. my shame 🤦🏻 — yunusunver
– yunusunver, Commented May 27, 2020 at 9:10

Dharman · Accepted Answer · 2020-11-13 20:34:06Z

13

My problem is solved. Errors disappeared when I used 'HTMLAnchorElement'. I did not know that the element 'a' corresponds to 'anchor'.

edited Nov 13, 2020 at 20:34

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered May 27, 2020 at 9:35

yunusunver

6501 gold badge7 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Samuel Tosin · Accepted Answer · 2025-04-30 07:16:09Z

5

You're trying to use an <a> tag but you're telling TypeScript it should expect props for a <link> tag. Those are completely different HTML elements.

the props don't match up! For an <a> tag (anchor/link that you click), you need to use HTMLAnchorElement instead. Here's how you'd fix it:

const MyComponent: React.FC<React.AnchorHTMLAttributes<HTMLAnchorElement>> = (
  props
) => {
  return (
    <a {...props} className="mycomponent">
      MyComponent
    </a>
  );
};

answered Apr 30 at 7:16

Samuel Tosin

1063 silver badges13 bronze badges

1 Comment

Jared Smith Apr 30 at 10:51

I usually cringe when I see a new answer to an old question because they're almost uniformly bad, but this was a pleasant surprise of an exception. Nice!

DungGramer · Accepted Answer · 2025-04-30 05:55:08Z

2

Using AnchorHTMLAttributes<HTMLAnchorElement>.

Example:

import { AnchorHTMLAttributes, FC } from 'react';

interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {
  className?: string;
  title: string;
}

const OpenNewTab: FC<Props> = ({ className, title, ...props }) => {
 <a target="_blank" className={className} {...props}>
     <span>{title}</span>
 </a>
}

edited Apr 30 at 5:55

answered Mar 3 at 3:58

DungGramer

2,4061 gold badge11 silver badges15 bronze badges

Comments

Mr. Polywhirl · Accepted Answer · 2025-05-02 13:32:32Z

To further ellaborate on Samuel Tosin's response,

If you set up a new project using npm create vite@latest (React 19, but should work with React 17 and 18), you can create the following function component:

import React from "react";

export type CustomAnchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
  external?: boolean;
};

const CustomAnchor: React.FC<CustomAnchorProps> = ({
  children,
  className = "",
  external = false,
  target,
  rel,
  ...rest
}) => {
  return (
    <a
      {...rest}
      target={external ? "_blank" : target}
      rel={external ? "noopener noreferrer" : rel}
      className={`CustomAnchor ${className}`}
    >
      {children}
    </a>
  );
};

export default CustomAnchor;

The component supports the base anchor attributes, plus an additiona ones defined in the CustomAnchorProps type union. Additionally, the children prop allows you to use this component to wrap anything you want.

Here is the usage (I just blew-away the default App.tsx in the Vite setup):

import CustomAnchor from "./components/CustomAnchor";

import "./App.css";

function App() {
  return (
    <>
      <div>
        <CustomAnchor href="https://example.com" external>
          <h2>External Link</h2>
        </CustomAnchor>

        <CustomAnchor href="/about">
          <h2>Internal Link</h2>
        </CustomAnchor>
      </div>
    </>
  );
}

export default App;

Collectives™ on Stack Overflow

Extending HTML anchor elements in React and TypeScript

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related