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

@@ -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)

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]