React hook for keyboard navigation with focus control
npm install use-keyboard-navigationbash
npm install use-keyboard-navigation
`
Example1
`javascript
import { useKeyboardNavigation } from "use-keyboard-navigation";
const Component = () => {
const scrollContainerRef = useRef(null);
useKeyboardNavigation({
parentRef: containerRef, // Works only if parentRef is focused
keys: ['ArrowUp', 'ArrowDown', 'Home', 'End'], // Specify the keys you want to use for navigation
// Callback function to be executed when the key is pressed
onKeyPress: (key) => {
if (!containerRef.current) return;
const scrollStep = 100;
const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
switch (key) {
case 'ArrowDown':
containerRef.current.scrollBy({
top: scrollStep,
behavior: 'smooth',
});
break;
case 'ArrowUp':
containerRef.current.scrollBy({
top: -scrollStep,
behavior: 'smooth',
});
break;
case 'Home':
containerRef.current.scrollTo({
top: 0,
behavior: 'smooth',
});
break;
case 'End':
containerRef.current.scrollTo({
top: scrollHeight - clientHeight,
behavior: 'smooth',
});
break;
}
},
});
return ;
};
`
Example 2
`javascript
// WCAG/EAA 2.1 compatible keyboard navigation
export default function Navigation() {
const linksRef = useRef([]);
useKeyboardNavigation({
keys: ['1', '2', '3', '4'],
onKeyPress: (_, index) => {
linksRef.current[index]?.focus();
},
});
return (
);
}
``