Felix Gerschau

What is the TypeScript definition for the onLoadedMetadataCapture event in React?

The right interface for onLoadedMetadataCapture is SyntheticEvent

Please continue reading below to see how to use it or read my guide on using React's events with TypeScript.

SyntheticEvent is the generic definition for events in React. All other event definitions extend this one.

In this case, there isn't a more specific definition available.

Interface

interface BaseSyntheticEvent<E = object, C = any, T = any> {
    nativeEvent: E;
    currentTarget: C;
    target: T;
    bubbles: boolean;
    cancelable: boolean;
    defaultPrevented: boolean;
    eventPhase: number;
    isTrusted: boolean;
    preventDefault(): void;
    isDefaultPrevented(): boolean;
    stopPropagation(): void;
    isPropagationStopped(): boolean;
    persist(): void;
    timeStamp: number;
    type: string;
}

interface SyntheticEvent<T = Element, E = Event> extends BaseSyntheticEvent<E, EventTarget & T, EventTarget> {}

Full example

import React, { SyntheticEvent } from 'react';

const App = () => {
  const handleEvent = (e: SyntheticEvent<HTMLDivElement>) => {
    // Do something
  };

  return <div src="/img.png" onLoadedMetadataCapture={handleEvent}>{/** Some code */}</div>;
};

export default App;

Attributes that use SyntheticEvent:

GitHubTwitterEmail
RSSGatsby