React: native img attribute loading="lazy" (chrome new feature).

[hrkazemi]

attribute loading="lazy" works on image tag as it should;
but in react I should use 'data-loading' or 'custom-loading' otherwise error
Property 'loading' does not exist on type 'DetailedHTMLProps, HTMLImageElement>'
appears.

unfortunately with 'data-loading' or 'custom-loading' not working.

[threepointone]

Good point, we should add it.

[goenning]

That sounds like a React TypeScript error, can you confirm?

As far as I know, you can already use that property on a img tag.

[eps1lon]

Property 'loading' does not exist on type 'DetailedHTMLProps'

As @goenning said this is most likely a typescript error. Before you open a PR to @types/react please read https://github.com/DefinitelyTyped/DefinitelyTyped/pull/38694#pullrequestreview-294671505

React doesn't warn against excess props on host components if they're not in camelcase.

[hrkazemi]

As @goenning said this is most likely a typescript error. Before you open a PR to @types/react please read DefinitelyTyped/DefinitelyTyped#38694 (review)

React doesn't warn against excess props on host components if they're not in camelcase.

@goenning & @eps1lon you are right; this is React TypeScript error.
@eps1lon as you say, can't accept this since it's not part of the standard yet so is there any other way I can access this feature in "React TypeScript"?

[eps1lon]

@eps1lon as you say, can't accept this since it's not part of the standard yet so is there any other way I can access this feature in "React TypeScript"?

Got you covered: https://react-typescript-cheatsheet.netlify.app/docs/advanced/types_react_api#adding-non-standard-attributes

This was mentioned in the comment I linked.

[hrkazemi]

Got you covered: https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/blob/master/ADVANCED.md#adding-non-standard-attributes

This was mentioned in the comment I linked.

thanks.

[ayroblu]

https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/blob/230fb013f3858ece46f032db62e7af70d9910ffb/docs/advanced/types-react-ap.md#adding-non-standard-attributes
For those looking more recently

// react-unstable-attributes.d.ts
import "react";

declare module "react" {
  interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {
    loading?: "auto" | "eager" | "lazy";
  }
}