Sometimes, it's useful to listen to the tap of a particular key on the keyboard. That's where the owned keystroke composable can help us out. Alright, so go ahead and click on the starter link below and let's give it a try. We're starting out with a simple view component that includes a div that's been styled to look like a little red ball.
We've also got a reactive ref that's keeping track of the position of the ball. Lastly, we're binding that position to the top and left CSS properties of the ball so that whenever the reactive ref changes, the ball will visually move on the page. Okay, so let's use onKeystroke to enable moving the ball with the arrow keys. First, I'll call onKeystroke and tell it that we want to listen to the arrow down key.
Next, we need to provide a callback function. that will run whenever the arrow down key is pressed. And this callback function is going to receive the event from pressing the key. preventDefault.
Now all that's left to do is change the y property of our position reactive ref. I'm incrementing it by 5 here just so that it will move a little bit more quickly than if we were incrementing it by one. Now, if I focus the app on the right hand side of the screen and click the down arrow, sure enough, our ball scoots down. And I can continue to press the down arrow as many times as I'd like.
Great. Now let's get the ball moving up again. I'll copy and paste our on key stroke block here and change it out to listen to the arrow up key. Then, instead of adding five to the Y position, we'll need to subtract it.
Alright, after shaving I can go on over to the right hand side and start moving my ball up and down. Pretty cool. We could do the same thing for arrow left and arrow right, but that might end up getting a little verbose. Instead, we could actually pass an array to onKeystroke to listen for any of the arrow keys.
And then we can use the key property on the event. in order to determine which key was pressed. Alright, let's quickly prevent the default and then write some conditionals in order to get things working. First, if the key is arrow down, then we'll add 5 to Y just like we did before.
If the key is arrow up, then we'll subtract 5. If the key is arrow right, then we'll add 5 but to the X instead of the Y. And then lastly for arrow left, We'll subtract 5 for max. Now, whenever I try things out, I'm able to move the ball absolutely anywhere I'd like.
Things are shaping up nicely. For the sake of my sanity though, let's refactor this just a little bit to clean it up and make it a little more readable. First, I'll create a variable called controls, where I'll make a map of all the array keys and map those keys to their respective functionality. And then, I can get rid of all these messy if statements.
And even get rid of all the hard-coded arrow down, arrow up, arrow left, and arrow right strings that we're listening to on onKeystroke. keys() to get all the keys from the controls. Finally, I'll call the proper function based on the event key. prevent the fault, so let's put that back as well.
Nice. Doesn't that look better? There's less nesting going on, plus we only define the keys once. That is, alongside their functionality in the controls map.
But the important question is, does it still work? Let's find out. Perfect. Finally, one of the nicest features of this composable is that it doesn't matter what's focused on the page.
The event will still fire just the same. For instance. if I were to add a text input to the page and then focus it. The arrow keys would still move the ball as expected.
Sometimes, it's useful to listen to the tap of a particular key on the keyboard. That's where the owned keystroke composable can help us out. Alright, so go ahead and click on the starter link below and let's give it a try. We're starting out with a simple view component that includes a div that's been styled to look like a little red ball.
We've also got a reactive ref that's keeping track of the position of the ball. Lastly, we're binding that position to the top and left CSS properties of the ball so that whenever the reactive ref changes, the ball will visually move on the page. Okay, so let's use onKeystroke to enable moving the ball with the arrow keys. First, I'll call onKeystroke and tell it that we want to listen to the arrow down key.
Next, we need to provide a callback function. that will run whenever the arrow down key is pressed. And this callback function is going to receive the event from pressing the key. preventDefault.
Now all that's left to do is change the y property of our position reactive ref. I'm incrementing it by 5 here just so that it will move a little bit more quickly than if we were incrementing it by one. Now, if I focus the app on the right hand side of the screen and click the down arrow, sure enough, our ball scoots down. And I can continue to press the down arrow as many times as I'd like.
Great. Now let's get the ball moving up again. I'll copy and paste our on key stroke block here and change it out to listen to the arrow up key. Then, instead of adding five to the Y position, we'll need to subtract it.
Alright, after shaving I can go on over to the right hand side and start moving my ball up and down. Pretty cool. We could do the same thing for arrow left and arrow right, but that might end up getting a little verbose. Instead, we could actually pass an array to onKeystroke to listen for any of the arrow keys.
And then we can use the key property on the event. in order to determine which key was pressed. Alright, let's quickly prevent the default and then write some conditionals in order to get things working. First, if the key is arrow down, then we'll add 5 to Y just like we did before.
If the key is arrow up, then we'll subtract 5. If the key is arrow right, then we'll add 5 but to the X instead of the Y. And then lastly for arrow left, We'll subtract 5 for max. Now, whenever I try things out, I'm able to move the ball absolutely anywhere I'd like.
Things are shaping up nicely. For the sake of my sanity though, let's refactor this just a little bit to clean it up and make it a little more readable. First, I'll create a variable called controls, where I'll make a map of all the array keys and map those keys to their respective functionality. And then, I can get rid of all these messy if statements.
And even get rid of all the hard-coded arrow down, arrow up, arrow left, and arrow right strings that we're listening to on onKeystroke. keys() to get all the keys from the controls. Finally, I'll call the proper function based on the event key. prevent the fault, so let's put that back as well.
Nice. Doesn't that look better? There's less nesting going on, plus we only define the keys once. That is, alongside their functionality in the controls map.
But the important question is, does it still work? Let's find out. Perfect. Finally, one of the nicest features of this composable is that it doesn't matter what's focused on the page.
The event will still fire just the same. For instance. if I were to add a text input to the page and then focus it. The arrow keys would still move the ball as expected.