You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+25-12
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# svelte-kbc
2
2
3
-
Configure stores for keyboard inputs and events in any Svelte app.
3
+
Configure a rune for keyboard inputs and events in any Svelte app.
4
4
5
5
[Example on StackBlitz](https://stackblitz.com/edit/example-svelte-kbc?file=README.md)
6
6
@@ -12,32 +12,45 @@ Configure stores for keyboard inputs and events in any Svelte app.
12
12
constconfig= [
13
13
// individual key presses
14
14
{ name:'forward', keys: ['ArrowUp', 'w', 'W'] },
15
-
{ name:'jump', keys: [''] },
15
+
{ name:'jump', keys: ['', 'Space'] },
16
16
{ name:'click', events: ['click'] },
17
17
]
18
18
```
19
19
**Note:**_Only certain events are currently supported. See `KbcEvent` types below._
20
20
21
-
2. Wrap your application (or a part of your application) in `<KeyboardControls />` to create a context from your config. Any child component can then subscribe to the control stores with the names you provided.
21
+
2. Wrap your application (or a part of your application) in `<KeyboardControls />` to create a context from your config. Any child component can then access the control rune with the names you provided.
22
22
23
23
```html
24
24
<KeyboardControls{config}>
25
-
<!-- Anything in here can access the control stores 'forward', 'jump', 'click' -->
25
+
<!-- Anything in here can access the control rune with properties 'forward', 'jump', 'click' -->
26
26
<BrowserGame />
27
27
</KeyboardControls>
28
28
```
29
29
30
-
3. In a child component, the `useKeyboardControls()` hook will return all your controls as stores. From there, handle the events however you need to:
30
+
3. In a child component, the `useKbc()` hook will return the controls rune, with the properties set in the config. From there, handle the events however you need to:
**Note:** Both key and event control stores will emit their respective `event` objects when they occur (or when they are "pressed"), otherwise they will emit `false`.
46
+
$effect(() => {
47
+
if (forward) handleMoveForward()
48
+
if (forward && jump) handleForwardJump()
49
+
if (click) handleClickThings()
50
+
})
51
+
52
+
```
53
+
**Note:** The keys and events will "emit" their respective `event` objects when they occur, otherwise they will "emit" `false`
41
54
42
55
# `<KeyboardControls />` Properties
43
56
@@ -140,7 +153,7 @@ Just pass in a name mapping object when you invoke the config:
140
153
wasdConfig({ space: 'jump' })
141
154
```
142
155
143
-
Now your control stores will be named `w, a, s, d, shift, jump`
156
+
Now your control rune properties will be named `w, a, s, d, shift, jump`
0 commit comments