Typescript extend HTMLIFrameElement

Question

I'm using a youtube Iframe which has the attribute type, apparently type isn't a property that exists on Iframe. How would I add this attribute to the Iframe type definition?

The definition of the Iframe in my react component:

<iframe 
    id="ytplayer" 
    type="text/html"
    src={someSource}
    frameBorder="0">
</iframe>

The Error that TS is throwing:

Property 'type' does not exist on type 'DetailedHTMLProps<IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>'

I have tried something like the following to little avail:

interface HTMLIFrameElement {
  type?: string;
}

Matei Radu · Accepted Answer · 2019-07-22 13:01:11Z

1

Edit

I misunderstood and thought that you wanted to add non-standard properties to the iframe and not that YouTube provides it already with the type property.

In this case, the type property can be safely ignored and removed as it will not change the iframe's behavior in any way.

Original Answer

Instead of adding a non-standard property to an iframe, I would suggest to use a data attribute.

Data Attributes allow you to add extra data to HTML elements without hacking their types and TypeScript fully supports them.

Data attributes are prefixed with data-, so in your case, you would end up with:

<iframe 
    id="ytplayer" 
    data-type="text/html"
    src={someSource}
    frameBorder="0">
</iframe>

edited Jul 22, 2019 at 13:01

answered Jul 22, 2019 at 12:52

Matei Radu

2,0783 gold badges28 silver badges45 bronze badges

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

Comments

ngranko · Accepted Answer · 2019-07-22 10:00:03Z

0

Try adding this attribute globally, like so:

declare global {
    interface HTMLIFrameElement {
        type?: string;
    }
}

That way the attribute should be added to the global HTMLIFrameElement interface. Also, after Typescript sees this declaration once, this attribute will always be available on this interface, so if you want to use it in other places in your code, you can place this declaration somewhere near the top of your bundle.

answered Jul 22, 2019 at 10:00

Collectives™ on Stack Overflow

Typescript extend HTMLIFrameElement

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related