pagarme
`do` is a reserved word in javascript
great work on this library 👍
one note... since do is a reserved identifier in javascript, it is probably a good idea to use an alternative like run or execute or exec or something
I would vote for run as in "when this happen run this function".
<KeyDown when="a" run="myFunc" />
I don't like exec nor execute. I do like run, trigger or action, but I think run is the most declarative option.
@MarcoWorms @grvcoelho alternatively, you could use children-as-function pattern...
eg KeyDown.js:
class KeyDown extends Component {
listen = (event) => {
event.preventDefault()
event.stopPropagation()
if (
event.key === this.props.when &&
typeof this.props.children === 'function'
) {
this.props.children({ event })
}
}
// ...
usage...
// if holding shift, move by 20 px
<KeyDown when="w">
{({ event }) => this.move({ y: y - event.shiftkey ? 20 : 10 })}
</KeyDown>
<KeyDown when="a">{() => this.move({ x: x - 10 })}</KeyDown>
<KeyDown when="s">{() => this.move({ y: y + 10 })}</KeyDown>
<KeyDown when="d">{() => this.move({ x: x + 10 })}</KeyDown>
@justingreenberg Whoa, didn't knew this would work!!
Anyway, I find it a little bit cumbersome, and self-closing tags for this specific usage looks better on code than using children, but thanks for your idea though, I really appreciate your interaction :beers:
@justingreenberg Thats really awesome, it feels nice to use but I agree with Derek, I think it's better to declare in a "do" parameter so we don't use child props on these components to make them more declarative.
Is there any problem if we just leave it as do? (other than screwing up the color highlighter) :laughing:
I think we should come with something better than run. Let's see how long we can stick with do until it bothers us?
Let's keep this issue open as a tracking point :world_map:
Guys, let's just ignore it for now! do works just good enough!
:+1: if you agree in closing this discussion!