From 74dbf4c46a27e9017f5484a785246950f0856863 Mon Sep 17 00:00:00 2001
From: oyar <hamuyrodrigo@gmail.com>
Date: Sun, 30 Oct 2022 10:39:33 +0000
Subject: [PATCH] feat: add types to keyboard controls (#1118)

* feat: add types to keyboard controls

* docs: keyboard controls update

* fix: keyboard control types

* fix: typo
---
 README.md                    |  4 ++--
 src/web/KeyboardControls.tsx | 14 +++++++-------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 710870e42..584e15ee8 100644
--- a/README.md
+++ b/README.md
@@ -353,7 +353,7 @@ Scroll controls create a HTML scroll container in front of the canvas. Everythin
 You can listen and react to scroll with the `useScroll` hook which gives you useful data like the current scroll `offset`, `delta` and functions for range finding: `range`, `curve` and `visible`. The latter functions are especially useful if you want to react to the scroll offset, for instance if you wanted to fade things in and out if they are in or out of view.
 
 ```jsx
-<ScrollControls
+;<ScrollControls
   pages={3} // Each page takes 100% of the height of the canvas
   distance={1} // A factor that increases scroll bar travel (default: 1)
   damping={4} // Friction, higher is faster (default: 4)
@@ -387,7 +387,7 @@ function Foo(props) {
     // Will start increasing when 1 / 3 of the scroll distance is reached,
     // and reach 1 when it reaches 2 / 3rds.
     const b = data.range(1 / 3, 1 / 3)
-        // Same as above but with a margin of 0.1 on both ends
+    // Same as above but with a margin of 0.1 on both ends
     const c = data.range(1 / 3, 1 / 3, 0.1)
     // Will move between 0-1-0 for the selected range
     const d = data.curve(1 / 3, 1 / 3)
diff --git a/src/web/KeyboardControls.tsx b/src/web/KeyboardControls.tsx
index b85c67d15..7582a5fa6 100644
--- a/src/web/KeyboardControls.tsx
+++ b/src/web/KeyboardControls.tsx
@@ -90,16 +90,16 @@ export function KeyboardControls({ map, children, onChange, domElement }: Keyboa
   return <context.Provider value={api} children={children} />
 }
 
-export function useKeyboardControls<T extends string = string, U = any>(): [
+type Selector<T extends string = string> = (state: KeyboardControlsState<T>) => boolean
+
+export function useKeyboardControls<T extends string = string>(): [
   Subscribe<KeyboardControlsState<T>>,
   GetState<KeyboardControlsState<T>>
 ]
-export function useKeyboardControls<T extends string = string, U = any>(
-  sel: StateSelector<KeyboardControlsState<T>, U>
-): U
-export function useKeyboardControls<T extends string = string, U = any>(
-  sel?: StateSelector<KeyboardControlsState<T>, U>
-): U | [Subscribe<KeyboardControlsState<T>>, GetState<KeyboardControlsState<T>>] {
+export function useKeyboardControls<T extends string = string>(sel: Selector<T>): ReturnType<Selector<T>>
+export function useKeyboardControls<T extends string = string>(
+  sel?: Selector<T>
+): ReturnType<Selector<T>> | [Subscribe<KeyboardControlsState<T>>, GetState<KeyboardControlsState<T>>] {
   const [sub, get, store] = React.useContext<KeyboardControlsApi<T>>(context)
   if (sel) return store(sel)
   else return [sub, get]