@react-three/drei 9.38.2 → 9.40.0

package/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,18 +387,19 @@ 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)
     // 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/drei",
-  "version": "9.38.2",
+  "version": "9.40.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, 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,10 @@ 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;
+declare type Selector<T extends string = string> = (state: KeyboardControlsState<T>) => boolean;
+export declare function useKeyboardControls<T extends string = string>(): [
+    Subscribe<KeyboardControlsState<T>>,
+    GetState<KeyboardControlsState<T>>
+];
+export declare function useKeyboardControls<T extends string = string>(sel: Selector<T>): ReturnType<Selector<T>>;
 export {};