hodgef/react-simple-keyboard

Simulate/programmatically trigger physicalKeyboardHighlight

hedonicadapter opened this issue · 1 comments

Thanks for your work, it's just what I needed! I'm just wondering if I can highlight a couple keys programmatically so they can be highlighted on mount.

I'm thinking something similar to this:

useEffect(() => {
  document.getElementById('hg-button[data-skbtn="{escape}"]').click(); // Except it should stay "clicked"
}, []);

Hey @yungmilky,

To trigger keys programmatically you can use getButtonElement and useMouseEvents. This will allow you to do this:

keyboard.getButtonElement("{escape}").onclick();

If you want them to stay highlighted, you'll need to keep track of the buttons pressed in your logic, then pass a space-separated list of these buttons to buttonTheme. This will allow you to set a "highlighted" class of your choice for these buttons.

Feel free to explore the docs and try stuff out. If something doesn't work, you can provide a repro of the issue and I will help out.

Regards,
Francisco Hodge