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 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> {}
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;