@react-three/drei 9.39.0 → 9.40.1

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,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)
@@ -434,6 +434,10 @@ Semi-OrbitControls with spring-physics, polar zoom and snap-back, for presentati
 
 ![](https://img.shields.io/badge/-Dom only-red)
 
+<p>
+  <a href="https://codesandbox.io/s/vkgi6"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/vkgi6/screenshot.png" alt="demo"/></a>
+</p>
+
 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
@@ -1032,7 +1036,7 @@ You can either pass a Mesh and InstancedMesh as children:
   </mesh>
 
   <instancedMesh args={[null, null, 1_000]}>
-    <sphereGeometry args={[0.1]}>
+    <sphereGeometry args={[0.1]}/>
   </instancedMesh>
 </Sampler>
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/drei",
-  "version": "9.39.0",
+  "version": "9.40.1",
   "private": false,
   "description": "useful add-ons for react-three-fiber",
   "keywords": [
@@ -53,7 +53,7 @@
     "stats.js": "^0.17.0",
     "suspend-react": "^0.0.8",
     "three-mesh-bvh": "^0.5.15",
-    "three-stdlib": "^2.17.3",
+    "three-stdlib": "^2.18.0",
     "troika-three-text": "^0.46.4",
     "utility-types": "^3.10.0",
     "zustand": "^3.5.13"

package/web/KeyboardControls.d.ts

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