💡 Proposal - useKeyboard hook in f36-utils
See original GitHub issueThe problem
I see in our code base we have many approaches devs takes to listen to keyboard events and detect keycode, …etc.
const handleKeyUp = (e: React.KeyboardEvent) => {
if (KeyCodes.esc(e)) {
hidePanel();
}
};
document.addEventListener('keyup', (handleKeyUp as unknown) as EventListener);
return () => document.removeEventListener('keyup', (handleKeyUp as unknown) as EventListener);
That I believe we can make simpler, and since it’s considered as interactions, I believe it would fit well in F36
The proposed solution
A simple hook that accepts a reference or a document, adds/remove the events on mount and unmount, and finally emits callback functions
Also maybe some predefined ones for what we think is the most keyboard buttons we need to listen to?
const { onEsc, onEnter, onKey } = useKeyboard(ref | document);
onEsc(() => alert('👹'))
onKey('h', () => alert('hello'))
Common A11y Keyboard interactions
See full list https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Grid_Role#keyboard_interactions
Key | Action |
---|---|
→ | Moves focus to the right. |
← | Moves focus to the left. |
↓ | Moves focus down. |
↑ | Moves focus up. |
Page Down | Moves focus down an author-determined number of rows. |
Page Up | Moves focus up an author-determined number of rows. |
Home | Moves focus to the first cell in the row that contains focus. |
End | Moves focus to the last cell in the row that contains focus. |
ctrl + Home | Moves focus to the first cell in the first row. |
ctrl + End | Moves focus to the last cell in the last row. |
Or
Key combination | Action |
---|---|
ctrl + Space | Select the column that contains the focus. |
shift + Space | Selects the row that contains the focus. |
ctrl + A | Selects all cells. |
shift + → | Extends selection one cell to the right. |
shift + ← | Extends selection one cell to the left. |
shift + ↓ | Extends selection one cell down. |
shift + ↑ | Extends selection one cell up. |
Issue Analytics
- State:
- Created 3 years ago
- Reactions:2
- Comments:6 (2 by maintainers)
Top Results From Across the Web
react-native-community/hooks - GitHub
React Native APIs turned into React Hooks allowing you to access asynchronous APIs directly in your functional components. Note: You must use React...
Read more >A Proposal for an Alternative Design for Hooks - paulgray.net
An Alternative API for hooks based on functional programming patterns.
Read more >Introducing Hooks - React
Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. import React,...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
something like this? https://react-spectrum.adobe.com/react-aria/useKeyboard.html
I like it a lot!