search

taniarascia / comments

Comments
7 stars 0 forks source link

keyboard-shortcut-hook-react/ #147

Open utterances-bot opened 1 month ago

utterances-bot commented 1 month ago

Creating a Keyboard Shortcut Hook in React (Deep Dive) | Tania Rascia's Personal Website

Recently I needed to add some keyboard shortcuts to an app I was working on. I wrote up some example code and decided to write this article…

https://www.taniarascia.com/keyboard-shortcut-hook-react/

tobiasriemenschneider commented 1 month ago

Interesting. Short question: How are you doing you codeblocks? They are nice.

samimsu commented 1 month ago

It took me a while to start using custom hooks but I love them now. Every useEffect I look at now I wonder if it could be better to make it a custom hook. I love hiding the implementation details, not to mention the benefit of reusability.

renyuns commented 1 month ago

👍

FredLavoie commented 4 weeks ago

Curious why you chose key down instead of key up. I'm not expert, still learning this stuff. I thought key up was preferable from an a11y perspective.

Great article. Thank you for writing it!

sandbox4013 commented 3 weeks ago

Hi, man! Thanks for the article I'm wondering why do you broke rules of hooks? Any opinion why it's fine to do so?

https://codesandbox.io/p/sandbox/purple-paper-c5s8wp?file=%2Fsrc%2FApp.js

Object.entries(shortcuts).forEach(([shortcut, callback]) => {
    useShortcut(shortcut, callback)
  })
sandbox4013 commented 3 weeks ago

To previous comment - I'm talking about https://react.dev/reference/rules/rules-of-hooks#only-call-hooks-at-the-top-level

Don’t call Hooks inside loops, conditions, nested functions, or try/catch/finally blocks.

taniarascia commented 3 weeks ago

@sandbox4013 I just did that for ease of writing the code sandbox example. I wouldn't do that in a production app or include that in the article examples. It didn't matter much for this one page example, but good catch!

taniarascia commented 3 weeks ago

@tobiasriemenschneider I'm using Prismjs with a lot of custom colors and code for the code blocks.

sandbox4013 commented 3 weeks ago

@sandbox4013 I just did that for ease of writing the code sandbox example. I wouldn't do that in a production app or include that in the article examples. It didn't matter much for this one page example, but good catch!

Ok, thanks