txarli/txarli.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Format literally everything

Browse Source
This commit is contained in:
Cassidy Williams
2022-10-23 23:26:41 -05:00
parent ff9f16105e
commit 0d4e70c5ee
45 changed files with 11569 additions and 11706 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/posts/adding-keyboard-shortcuts-to-react.md
View File

@@ -7,11 +7,11 @@ added: "Aug 03 2015"
tags: [technical]
---
I love working with [React](http://facebook.github.io/react/). And I love cool
keyboard shortcuts. Luckily, the [Mousetrap](https://craig.is/killing/mice)
keyboard shortcut library works really well with React. Hot.
I love working with [React](http://facebook.github.io/react/). And I love cool
keyboard shortcuts. Luckily, the [Mousetrap](https://craig.is/killing/mice)
keyboard shortcut library works really well with React. Hot.
So, first you obvi have to install the two. Just use handy npm to do that, and
So, first you obvi have to install the two. Just use handy npm to do that, and
call:
```sh
@@ -19,14 +19,14 @@ call:
> npm install mousetrap
```
Dang. That was so easy. This is crazy.
Dang. That was so easy. This is crazy.
Now that you've done that, go ahead and build your React app as usual. Now,
Now that you've done that, go ahead and build your React app as usual. Now,
let's say that you have a super awesome component (called `<SuperAwesomeComponent>`),
and you want to call a function `letFishFly` in that component's class whenever
someone hits "* k", "ctrl+r", or the Konami Code. Because you feel like it.
someone hits "\* k", "ctrl+r", or the Konami Code. Because you feel like it.
It's so easy to add now! In your component, you just have to bind the Mousetrap
It's so easy to add now! In your component, you just have to bind the Mousetrap
command to `letFishFly` in the `componentWillMount` function, and unbind it in `componentWillUnmount`.
```js
@@ -38,6 +38,6 @@ command to `letFishFly` in the `componentWillMount` function, and unbind it in `
}
```
Oh my word. That's it. You have keyboard commands set up in React. Congratulations.
Oh my word. That's it. You have keyboard commands set up in React. Congratulations.
Until next time! :)