fetch priority attribute in <img> tag react js

Question

As the lighthouse suggests, I need to set priority to the LCP in my react project. I was trying to use fetchpriority ref attribute on the <img> tag and my lint is complaining about that attribute not existing. I am using react 17.0.2 with typescript. don't we have the support for fetchpriority attribute from react yet? Anyone know a work around for fix the lighthouse suggestion? preload-important-resources

Answer 1

You can define a type declaration that extends React's. Create a file in your project (e.g. custom.d.ts) with a definition like this:

import { AriaAttributes, DOMAttributes } from "react";

declare module 'react' {
  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    fetchpriority?: 'high' | 'low' | 'auto';
  }
};

and then reference it from your tsconfig.json:

{
  ...
  "include": [
    "custom.d.ts",
    ...
  ]
}

From that moment on you should be able to declare an img element with a fetchpriority attribute.

Answer 2

Try this

import React from "react";

declare module "react" {
  interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {
    fetchPriority?: 'high' | 'low' | 'auto';
  }
}

p.s. don't forget to import React