DEV Community

I put 18 event handlers on a React element

Thomas Pikauli on January 28, 2019

If you've ever built a React app you've probably encountered a SyntheticEvent. Good chance it was onChange, but maybe you've been a little more a...
Read full post
Collapse
 
dance2die profile image
Sung M. Kim • • Edited

Thanks Thomas for the post~ 👍

The result is amazing (and pretty 🙂).
I never knew so many events can be fired and be handled.

This post and the CodeSandbox demo gave me a pretty good idea what event to throttle/debounce.

And you might also want to give @codesandbox a tweet with the Sandbox link to be picked on CodeSandbox Explore page (Refer to doc on how to get picked -> codesandbox.io/docs/explore#how-ca...)

Collapse
 
ma5ly profile image
Thomas Pikauli •

Wow, thanks for your response Sung! Really appreciate it :)

Very curious what you're going to build. I'll definitely tweet codesandbox too!

Collapse
 
dance2die profile image
Sung M. Kim •

I've never dived deep into Synthetic events as it was more of trial & error for using them.

You can see a site I built there in the Explore page (search for bunpkg 🙂)

Thread Thread
 
ma5ly profile image
Thomas Pikauli •

Very cool! It's always nice if you can use your keyboard to navigate lists :)

Thread Thread
 
dance2die profile image
Sung M. Kim •

Thanks for the suggestion Thomas~

I created an issue on the project page.

Make lists/versions navigatable using keyboard #8

dance2die avatar
dance2die commented on Jan 28, 2019

Suggested by Thomas Pikauli.

dev.to/ma5ly/comment/8dge

image

View on GitHub
Collapse
 
blnkspace profile image
AVI •

The title is a meme in itself and the result is art! Love it!
Really appreciate the left-of-center, superfluous yet extremely informative approach to talking about a core subject!
Sidenote: this pushed me to see how easy Immer is maybe I won't set up ImmutableJS on my next project.

Collapse
 
ma5ly profile image
Thomas Pikauli •

Thanks a lot, really appreciate it :D

I'm not super familiar with ImmutableJS, but definitely give Immer a try and see if you can get away with just using that :)

Collapse
 
qm3ster profile image
Mihail Malo •

Some of those are really strange.
Eg if I hold backspace, it keeps counting keyDown but doesn't add even one keyPress. Whereas if I hold a letter key, it keeps spamming both?

Collapse
 
ma5ly profile image
Thomas Pikauli •

I think the difference has to do with keyPress only registering actual characters like letters and numbers, while keyDown registers any key.

Collapse
 
qm3ster profile image
Mihail Malo •

I feel like in both cases keyDown should fire once per physical press and then wait for keyUp before being able to fire again for this keycode. In nether case did it do that.

keyPress on the other hand can do whatever it damn pleases, including reacting only to characters appearing, I don't care :v