Typescript: Typing React Events

I always forgot which type I should use for all those HTML element events so I decided to pull up this little article to share with you some of the main ones.

import { PressEvent } from "@react-types/shared"
import React from "react";
import { SharedSelection } from "@nextui-org/react";

type EventTypes = {
    // mouse events
    onClick: React.MouseEvent<HTMLButtonElement>
    onMouseUp: React.MouseEvent<HTMLButtonElement>
    onMouseDown: React.MouseEvent<HTMLButtonElement>
    onMouseEnter: React.MouseEvent<HTMLButtonElement>
    onMouseLeave: React.MouseEvent<HTMLButtonElement>
    onMouseOver: React.MouseEvent<HTMLButtonElement>
    onMouseMove: React.MouseEvent<HTMLButtonElement>
    onBeforeToggle: React.ToggleEvent<HTMLButtonElement>

    //input
    onChange: React.ChangeEvent<HTMLInputElement>
    onInput: React.FormEvent<HTMLInputElement>
    onSubmit: React.FormEvent<HTMLInputElement>
    onKeyDown: React.KeyboardEvent<HTMLInputElement>
    onKeyUp: React.KeyboardEvent<HTMLInputElement>
    onBlur: React.FocusEvent<HTMLInputElement>
    onFocus: React.FocusEvent<HTMLInputElement>

    // other ones
    onCopy: React.ClipboardEvent<HTMLElement>
    onPaste: React.ClipboardEvent<HTMLElement>
    onCut: React.ClipboardEvent<HTMLElement>
    onAnimationStart: React.AnimationEvent<HTMLElement>
    onAnimationEnd: React.AnimationEvent<HTMLElement>
    onDrag: React.DragEvent<HTMLElement>
    onDrop: React.DragEvent<HTMLElement>
    onPointerEnter: React.PointerEvent<HTMLElement>


    // other ones from UI Libraries
    onPress: PressEvent
    onSelectionChange: SharedSelection
}

To use it:

function eventHandler(e: EventTypes["onDrag"]) {
    console.log(e)
}

I have only listed out some of the main ones, but same types applies for similar (?) events, for example, onDrag, onDragEnter, onDragOver, onDragLeave all have React.DragEvent.

Also, you might want to change what is within the brackets <> accordingly based on the element you are triggering the event handler from .

For example, the onClick we have above has HTMLButtonElement, but if you are attaching the onClick to an input, you will change it to React.MouseEvent<HTMLInputElement> instead.

Get Itsuki’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Or if you want a little bit more generic event type that is able to attach to any element, a button, an input, a div, or whatever, taking onClick as an example, you can also use React.MouseEvent<HTMLElement>.

onPress and onSelectionChange is a little special.

They are specialized to components Libraries.

I am pretty sure onPress is also used in other Libraries other than NextUI but (as you can see from the import) onSelectionChange is constraint to be within the library.

Just a side note here! If you have defined an onSelectionChange function, the chances are you have a state variable to keep track of the selection. The type for the state will actually be SharedSelection as well instead of a pure Set.

const [selectedKeys, setSelectedKeys] = React.useState<SharedSelection>(new Set([]))

That’s it for this short article!

Hope you find it saving you some time trying to look for the correct event type!