@react-three/drei 9.38.1 → 9.39.0

package/README.md

@@ -392,13 +392,14 @@ function Foo(props) {
     // Will move between 0-1-0 for the selected range
     const d = data.curve(1 / 3, 1 / 3)
     // Same as above, but with a margin of 0.1 on both ends
-    const d = data.curve(1 / 3, 1 / 3, 0.1)
+    const e = data.curve(1 / 3, 1 / 3, 0.1)
     // Returns true if the offset is in range and false if it isn't
-    const e = data.visible(2 / 3, 1 / 3)
+    const f = data.visible(2 / 3, 1 / 3)
     // The visible function can also receive a margin
-    const f = data.visible(2 / 3, 1 / 3, 0.1)
+    const g = data.visible(2 / 3, 1 / 3, 0.1)
   })
   return <mesh ref={ref} {...props} />
+}
 ```
 
 #### PresentationControls
@@ -436,11 +437,11 @@ Semi-OrbitControls with spring-physics, polar zoom and snap-back, for presentati
 A rudimentary keyboard controller which distributes your defined data-model to the `useKeyboard` hook. It's a rather simple way to get started with keyboard input.
 
 ```tsx
-type KeyboardControlsState = { [key: string]: boolean }
+type KeyboardControlsState<T extends string = string> = { [K in T]: boolean }
 
-type KeyboardControlsEntry = {
+type KeyboardControlsEntry<T extends string = string> = {
   /** Name of the action */
-  name: string
+  name: T
   /** The keys that define it, you can use either event.key, or event.code */
   keys: string[]
   /** If the event receives the keyup event, true by default */
@@ -461,33 +462,40 @@ type KeyboardControlsProps = {
 
 You start by wrapping your app, or scene, into `<KeyboardControls>`.
 
-```jsx
+```tsx
+enum Controls {
+  forward = 'forward',
+  back = 'back',
+  left = 'left',
+  right = 'right',
+  jump = 'jump',
+}
 function App() {
+  const map = useMemo<KeyboardControlsEntry<Controls>>(()=>[
+    { name: Controls.forward, keys: ['ArrowUp', 'w', 'W'] },
+    { name: Controls.back, keys: ['ArrowDown', 's', 'S'] },
+    { name: Controls.left, keys: ['ArrowLeft', 'a', 'A'] },
+    { name: Controls.right, keys: ['ArrowRight', 'd', 'D'] },
+    { name: Controls.jump, keys: ['Space'] },
+  ], [])
   return (
-    <KeyboardControls
-      map={[
-        { name: 'forward', keys: ['ArrowUp', 'w', 'W'] },
-        { name: 'backward', keys: ['ArrowDown', 's', 'S'] },
-        { name: 'leftward', keys: ['ArrowLeft', 'a', 'A'] },
-        { name: 'rightward', keys: ['ArrowRight', 'd', 'D'] },
-        { name: 'jump', keys: ['Space'] },
-      ]}>
+    <KeyboardControls map={map}>
       <App />
     </KeyboardControls>
 ```
 
 You can either respond to input reactively, it uses zustand (with the `subscribeWithSelector` middleware) so all the rules apply:
 
-```jsx
+```tsx
 function Foo() {
-  const pressed = useKeyboardControls(state => forward)
+  const forwardPressed = useKeyboardControls<Controls>(state => state.forward)
 ```
 
 Or transiently, either by `subscribe`, which is a function which returns a function to unsubscribe, so you can pair it with useEffect for cleanup, or `get`, which fetches fresh state non-reactively.
 
-```jsx
+```tsx
 function Foo() {
-  const [sub, get] = useKeyboardControls()
+  const [sub, get] = useKeyboardControls<Controls>()
 
   useEffect(() => {
     return sub(
@@ -500,7 +508,7 @@ function Foo() {
 
   useFrame(() => {
     // Fetch fresh data from store
-    const pressed = get().backward
+    const pressed = get().back
   })
 }
 ```
@@ -2398,7 +2406,7 @@ Now refer to it with the `useMask` hook and the same id, your content will now b
 const stencil = useMask(1)
 return (
   <mesh>
-    <torusKnotGeoometry />
+    <torusKnotGeometry />
     <meshStandardMaterial {...stencil} />
 ```
 

package/core/CatmullRomLine.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Line2 } from 'three/examples/jsm/lines/Line2';
+import { Line2 } from 'three-stdlib';
 import { LineProps } from './Line';
 export declare const CatmullRomLine: React.ForwardRefExoticComponent<Omit<LineProps, "ref"> & {
     closed?: boolean | undefined;

package/core/CubicBezierLine.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Vector3 } from 'three';
-import { Line2 } from 'three/examples/jsm/lines/Line2';
+import { Line2 } from 'three-stdlib';
 import { LineProps } from './Line';
 export declare const CubicBezierLine: React.ForwardRefExoticComponent<Omit<LineProps, "ref" | "points"> & {
     start: Vector3 | [number, number, number];

package/core/QuadraticBezierLine.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Vector3 } from 'three';
-import { Line2 } from 'three/examples/jsm/lines/Line2';
+import { Line2 } from 'three-stdlib';
 import { LineProps } from './Line';
 import { Object3DNode } from '@react-three/fiber';
 declare type Line2Props = Object3DNode<Line2, typeof Line2> & {

package/core/TransformControls.d.ts

@@ -7,11 +7,11 @@ export declare type TransformControlsProps = ReactThreeFiber.Object3DNode<Transf
     enabled?: boolean;
     axis?: string | null;
     domElement?: HTMLElement;
-    mode?: string;
+    mode?: 'translate' | 'rotate' | 'scale';
     translationSnap?: number | null;
     rotationSnap?: number | null;
     scaleSnap?: number | null;
-    space?: string;
+    space?: 'world' | 'local';
     size?: number;
     showX?: boolean;
     showY?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/drei",
-  "version": "9.38.1",
+  "version": "9.39.0",
   "private": false,
   "description": "useful add-ons for react-three-fiber",
   "keywords": [

package/web/KeyboardControls.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { StateSelector } from 'zustand';
-declare type KeyboardControlsState = {
-    [key: string]: boolean;
+import { GetState, StateSelector, Subscribe } from 'zustand';
+declare type KeyboardControlsState<T extends string = string> = {
+    [K in T]: boolean;
 };
-declare type KeyboardControlsEntry = {
-    name: string;
+export declare type KeyboardControlsEntry<T extends string = string> = {
+    name: T;
     keys: string[];
     up?: boolean;
 };
@@ -15,5 +15,9 @@ declare type KeyboardControlsProps = {
     domElement?: HTMLElement;
 };
 export declare function KeyboardControls({ map, children, onChange, domElement }: KeyboardControlsProps): JSX.Element;
-export declare function useKeyboardControls(sel?: StateSelector<KeyboardControlsState, any>): any;
+export declare function useKeyboardControls<T extends string = string, U = any>(): [
+    Subscribe<KeyboardControlsState<T>>,
+    GetState<KeyboardControlsState<T>>
+];
+export declare function useKeyboardControls<T extends string = string, U = any>(sel: StateSelector<KeyboardControlsState<T>, U>): U;
 export {};