00:00:00Tansac has released yet another new package in their quest to fix the JavaScript world
00:00:03and this time they're fixing hotkeys. Now if you think that's something that sounds
00:00:07simple and then AI could probably write for you these days, think again. Tansac hotkeys
00:00:11will handle the edge cases that AI often misses like multiple keyboard layouts, multiple operating
00:00:16systems, conflicting hotkeys, conflicting scopes and loads loads more and even has features
00:00:20like hotkey sequences and hotkey recording all while being type safe and framework agnostic.
00:00:26Trust me, if you need hotkeys just use this package or tell your AI agent to. I mean it's
00:00:30Tansac so it's going to have a good developer experience, so with that said let's dive in
00:00:35and see it in action.
00:00:41Now I'll start by jumping straight into the code as this is all pretty simple and I'm
00:00:45doing all of this in a react application so I'm using the Tansac react hotkeys package
00:00:49but they do also have a vanilla JavaScript package at the moment and there's going to
00:00:52be more framework ones coming soon but this is currently in alpha so there might be a few
00:00:56bugs here and there but for my use cases this has already solved all of them. Now we'll start
00:01:01with the most basic use case which is the use hotkey hook. You can see down here we've imported
00:01:05this from the package and all we need to do is define what our hotkey is and then also
00:01:09a function that's going to run when we press that hotkey. In my case I've set it up so when
00:01:13we do press the hotkey it's going to open up a command palette so a pretty common example.
00:01:17You can also see we have a toast down here just so you can see what I've been pressing
00:01:20and exactly what it's done. As you can see then this hook is incredibly simple it does
00:01:24exactly what it says it's going to do but the magic with Tansac is usually in the developer
00:01:28experience and the type safety and we get the exact same thing here. First it starts with
00:01:32our hotkeys anywhere where we have these in this package it is going to be type safe which
00:01:37is pretty insane. It knows of all of the possible keys that we can press as well as their combinations
00:01:41so I could change this to something like meta plus s which is actually command s on Mac OS
00:01:46so maybe I'm setting up a new hotkey for save in my application you see it knows that's a
00:01:50valid combination and if I was to mistype this it will throw a type error let us know
00:01:54this hotkey is not valid. The other cool thing about the hotkey definition is at the moment
00:01:58I've set it to meta plus k which is actually command plus k on Mac OS and you see that is
00:02:02working for me over here since I'm on Mac OS but it means this hotkey is no longer going
00:02:06to work on Windows or any other platform since the meta key doesn't exist over there so what
00:02:11we can actually do instead is we can switch out the meta key here for the modifier key
00:02:15and that means that automatically on Mac OS it's going to be set to command but on all
00:02:19other platforms this will actually be control so you immediately have a cross platform hotkey
00:02:24and finally still talking about the way that we even define the hotkeys in this package
00:02:27if you don't like the string definition you can actually use an object definition and this
00:02:31is the exact same keybind that we just had so command k or control k you see all we need
00:02:35to do is say what our non modifier key is and then set modifier to true if that's the one
00:02:38that we want or the other modifier keys if we want them. Finally moving on from the way
00:02:42that the hotkey is defined though next up in the arguments of the hook we have the actual
00:02:46function that runs when we press the hotkey and this one is incredibly simple obviously
00:02:50it can be whatever you want inside of here but you do also have access to the raw keyboard
00:02:54event if you need that and also some context and in this case the context is simply going
00:02:58to give you the hotkey as a string for what was pressed or you can get out the past hotkey
00:03:02which is going to come out as an object definition like we just saw and then last of all for the
00:03:05use hotkey hook it says loads more features that I want to show you but the third argument
00:03:09you can use here is some options to control how the hotkey works now most of these are
00:03:13pretty self-explanatory and I've set them all to their defaults we have things like enabled
00:03:17for programmatic control whether the hotkey is on or off we have event type for whether
00:03:21you want it to trigger on key down or key up require reset actually means at the moment
00:03:25if it's set to false if I hold down command k you can see it's constantly re triggering
00:03:29that hotkey however if I set this to true it means that we have to actually unpress the
00:03:33hotkey first for it to trigger again so you can see I'm holding it down at the moment and
00:03:37it only triggered once this time then we have ignore inputs this means that if I'm inside
00:03:41of an input and actually do command k you can see at the moment this is completely ignored
00:03:45it's not triggering the hotkey however we could set this to false if we actually want hotkeys
00:03:49to still work inside of our inputs and then finally the last option that I'll go through
00:03:53here is the target is this one actually allows you to create scoped hotkeys what this means
00:03:57is essentially at the moment by default it's set to the entire document and that means I
00:04:00can press command k anywhere on this page and it's currently triggering that command palette
00:04:04however I can change this to be an element or a react ref and if I change this over to
00:04:09be the badge ref for example you can see if I click on my page and do command k now it
00:04:13is not triggering however if I focus on my command k element down here so the badge you
00:04:17can see I can trigger it from inside of here so we now have a scoped hotkey hopefully you
00:04:21can already see why I really like this package there's always such good attention to detail
00:04:25a great developer experience and complete type safety and I've still only shown you a single
00:04:30hook so let's take a look at some more next up we have the use hotkey sequences hook which
00:04:34allows us to have multi-key sequences so we can set up things like vim style navigation
00:04:38and this one is pretty self-explanatory similar to the use hotkey hooks all we need to do is
00:04:43define what the key sequence is going to be then our function for what's going to run once
00:04:47that key sequence is entered then we can also have some options here and note timeout is
00:04:51essentially the time it takes between each key press for it still be registered as part
00:04:54of the sequence so the moment I've set this one to gg that's going to jump me to the top
00:04:59of the list so if I now go over here and press gg you can see it does exactly that I've also
00:05:04set up one down here so if I press sub that should jump me to the bottom and coincidentally
00:05:09that spells out subscribe something you should definitely do next up is some even simpler
00:05:12hooks the first one being the use key hold hook all you need to do is specify which key
00:05:16you want to track and now this is going to be a boolean of whether that key is held down
00:05:20or not you can see I'm monitoring a few of them over here so I now hold down shift and
00:05:24alt you can see it's changing the state on the page based on that boolean you also notice
00:05:28down here I'm listing out the keys that are currently held on my keyboard and that's coming
00:05:32from the second hook which is the use held keys hook which simply returns an array of
00:05:36the keys that are held down so again I hold down sub you can see it's showing up in that
00:05:40array and then the last hook that I want to show you before we move on to some of the cool
00:05:43utility functions is the use hotkey recorder hook this actually lets you create keyboard
00:05:47shortcut customization UIs and it's just a really nice helper hook you can see it's very
00:05:52simple one to use we have the use hotkey recorder hook I mean get some values out of this like
00:05:56whether it's recording currently the recorded hotkey itself the function to start the recording
00:06:00and a function to cancel the recording then inside of the options for the hook we can
00:06:05also register what we want to happen when a hotkey is successfully recorded in my case
00:06:09I am simply setting the palette hotkey to be whatever hotkey the user decided once we hook
00:06:14all of this up to a button we can get a UI similar to this so at the moment command K
00:06:17opens up my command palette but if I press record that's now using my hook so it's listening
00:06:21out for my keyboard so if I do command backspace you can see that is now my new hotkey to open
00:06:26up the command palette obviously you'd probably save that to the database so it's actually
00:06:29persisted in the user's settings it's just a super nice helper hook and along with the
00:06:33other ones that we've looked at it is super simple to use and even has some nice defaults
00:06:37like the fact if they record that hotkey on Mac OS and use the command key it will automatically
00:06:42convert this to the modifier key so they move over to Windows or Linux it will be control
00:06:46over there now besides the hooks there's a few more things I want to show you about this
00:06:49package and the first one is the functions that help you with formatting you see we have
00:06:53a function here called format for display and that is coming from tan stack hotkeys it allows
00:06:57us to put in a hotkey like modifier and backspace that's going to convert it automatically to
00:07:02the user's platform and then also to the icons so in this case it's showing command backspace
00:07:06if I was on Windows this would show as control backspace then we also have the format with
00:07:10labels function which essentially does the exact same thing except it takes our modifier
00:07:14key and just converts it into the correct label instead of the icon so in this case command
00:07:18backspace but again on Windows that would be control backspace and then finally one of the
00:07:22reasons I love tan stack is the dev tools and this package is no different if we open up
00:07:27the dev tools we can see the hotkeys that are registered on the page along with the
00:07:30sequences we can see things about that state and how many times they've been triggered
00:07:33you can see whether it's triggering on a key down or a key up we can see whether it's listening
00:07:37on the document or on a specific element and inside of this you can even see more details
00:07:41like the options that have been configured for that hotkey or sequence and even cause
00:07:45a manual trigger plus at the top here you can see the keys that are currently held down on
00:07:49the page so if you don't know what one of the keys is when you're trying to set it up just
00:07:52come in here press it down and now you can see the exact value I know it might sound a
00:07:56bit like a broken record but tan stack truly does get developer experience and I'm just
00:08:00super happy that we still get this in the world of AI coding so I highly recommend you check
00:08:05out this package if it's something that you need and let me know what you think of it in
00:08:08the comments down below or you're there subscribe and as always see you in the next one