For example ctrl + Z + F7

In a particular component, you need to catch the fact of pressing such a combination.

    2 answers 2

    Something like this. Posted on the knee. I don’t think that it’s better than the options that libraries can offer, but it will help you to understand how the combination catching under the hood works)) You can delete the lines with comment //мусор .

     let catchCombination = (() => { let combination = []; window.addEventListener("keyup", () => { combination = []; document.getElementById("clicked").innerHTML = ""; //мусор }); return (e, userCombination) => { combination.push(e.code); document.getElementById("clicked").innerHTML += "Π—Π°ΠΆΠ°Ρ‚Ρ‹ " + combination.join("+") + "<br>"; //мусор if (combination.join("+").toLowerCase() === userCombination.toLowerCase()) { document.body.innerHTML += "<span style='color:green'>ΠšΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΡ ΠΏΠΎΠΉΠΌΠ°Π½Π°!<span><br>"; //Ρ‚ΡƒΡ‚ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Ρ‚Π²ΠΎΠΉ ΠΊΠΎΠ΄ } } })(); window.addEventListener("keydown", e => catchCombination(e, "ControlLeft+KeyZ+f7")); 
     НаТми Π² это ΠΎΠΊΠ½ΠΎ, Π° ΠΏΠΎΡ‚ΠΎΠΌ Π·Π°ΠΆΠΌΠΈ control + z +f7!<br> <div id="clicked"></div>

    • It turns out in reactjs there is nothing built in and good practice to use window.addEventListener keydown and keyup? - manking
    • @manking if you want to catch clicks wherever the focus is, then this is a good option. The task of the reactor is to draw the interface, I don’t remember anything built into it. - Misha Saidov

    In the event object of the onkeyup (e) handler, there is the e.ctrlKey, e.metaKey, e.shiftKey property. Those. It is easy to track the combination of two keys, one of which is ctrl, alt, shift. I can not imagine the option where you need to hold down three keys in order to trigger something.