I have a page with ComponentA. I need ComponentA to react on keyboard key event with some function. Like:
useEffect(() => {
window.addEventLister // and so on
return () => window.removeEventListener // and so on
}, [])
This is the easy part. But whenever there is ComponentB present and its input is in focus this listeners should not fire. There may be multiple ComponentB and ComponentA and ComponentB may be separated by another components. How should i approach this problem? My first idea was to create Context and send signals to it whenever input gets in focus or blured or destroyed, but may be there is a better solution?