Type the onKeyUp event in React (TypeScript)

avatar

Borislav Hadzhiev

Last updated: Apr 17, 2022

banner

Photo from Unsplash

Type the onKeyUp event in React (TypeScript) #

Use the React.KeyboardEvent<HTMLElement> type to type the onKeyUp event in React. The KeyboardEvent interface is used for onKeyUp events. You can access the value of the key pressed by the user as event.key.

App.tsx
import React from 'react'; const App = () => { // ✅ type event as React.KeyboardEvent<HTMLElement> const handleKeyUp = (event: React.KeyboardEvent<HTMLElement>) => { console.log(event.key); // console.log(event.code); }; return ( <div> <input type="text" id="message" name="message" defaultValue="" onKeyUp={handleKeyUp} /> </div> ); }; export default App;

We typed the event as React.KeyboardEvent<HTMLElement> because the KeyboardEvent type is used for onKeyUp events in React.

onkeyup event

However, we could have been more specific when typing the event.

The easiest way for you to find out what the type of an event is, is to write the event handler inline and hover over the event parameter in the function.
App.tsx
const App = () => { // 👇️ onKeyUp event is written inline // hover over the `event` parameter with your mouse return ( <div> <input type="text" id="message" name="message" defaultValue="" onKeyUp={event => console.log(event)} /> </div> ); }; export default App;

get type of onkeyup event inline

When the event is written inline, I can hover over the event parameter and it shows me what the type of the event is.

TypeScript is able to infer the type of the event when it's written inline.

This is very useful because it works with all events. Simply write a "mock" implementation of your event handler inline and hover over the event parameter to get its type.

Once you know what the type of the event is, you are able to extract your handler function and type it correctly.

Now that we know that the correct type for the onKeyUp event in the example is React.KeyboardEvent<HTMLInputElement>, we can extract our handler function.

App.tsx
import React from 'react'; const App = () => { const handleKeyUp = (event: React.KeyboardEvent<HTMLInputElement>) => { console.log(event.key); // console.log(event.code); }; return ( <div> <input type="text" id="message" name="message" defaultValue="" onKeyUp={handleKeyUp} /> </div> ); }; export default App;

The key property on the KeyboardEvent object returns the value of the key that was pressed by the user.

The type we passed to the KeyboardEvent generic is HTMLInputElement because we attached the onKeyUp event to an input element, however you could be attaching the event to a different element.

The types are consistently named as HTML***Element. Once you start typing HTML.., your IDE should be able to help you with autocomplete.

Some commonly used types are: HTMLInputElement, HTMLButtonElement, HTMLAnchorElement, HTMLImageElement, HTMLTextAreaElement, HTMLSelectElement, etc.

Note that you can use this approach to get the type of all events, not just onKeyUp events.

As long as you write the event handler function inline and hover over the event parameter, TypeScript will be able to infer the event's type.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.