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 events with TypeScript.

You can also go to the search page to find another event.

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:

GitHubTwitterEmailRSS