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

The right interface for onLoad 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" onLoad={handleEvent}>{/** Some code */}</div>;
};

export default App;

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

The right interface for onLoad is SyntheticEvent

Interface

Full example

Attributes that use SyntheticEvent:

Get notified about new tutorials