react-icons / react-icons

svg react icons of popular icon packs
https://react-icons.github.io/react-icons/
Other
11.18k stars 721 forks source link

Add closing of the icon details modal with the ESC key #900

Open gabrielogregorio opened 4 months ago

gabrielogregorio commented 4 months ago

Description:

Added the useKeyDown hook to improve interaction with the site using the keyboard, this specific pull request I am using this hook to close the icon details modal by pressing the ESC key.

The hook listens to the global window "keydown" event and triggers a callback function with a key pressed.

Example of closing the modal using the ESC key

https://github.com/react-icons/react-icons/assets/48621655/3a620b8b-5c7a-4570-a3a1-a719ca5a0be2

The hook synchronizes the ref with the most current value of the callback function, without interrupting the listener.

const refCallback = useRef(callback);

useEffect(() => {
    refCallback.current = callback;
}, [call back]);

Benefits:

With this it will be possible to use the ESC keys to close the icon detail modal, I personally find it much more practical.

References:

And on other sites.

I'm open to suggestions