@react-three/drei 9.68.0 → 9.68.2

package/README.md

@@ -1,4 +1,4 @@
-![logo](logo.jpg)
+[![logo](logo.jpg)](https://codesandbox.io/s/bfplr)
 
 [![Version](https://img.shields.io/npm/v/@react-three/drei?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@react-three/drei)
 [![Downloads](https://img.shields.io/npm/dt/@react-three/drei.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@react-three/drei)
@@ -1892,15 +1892,15 @@ function Scene() {
 A "counter" example.
 
 ```tsx
-<Example />
+<Example font="/Inter_Bold.json" />
 ```
 
 ```tsx
 type ExampleProps = {
+  font: string
   color?: Color
   debug?: boolean
   bevelSize?: number
-  font?: string
 }
 ```
 
@@ -1909,7 +1909,7 @@ Ref-api:
 ```tsx
 const api = useRef<ExampleApi>()
 
-<Example ref={api} />
+<Example ref={api} font="/Inter_Bold.json" />
 ```
 
 ```tsx

package/core/Example.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("./Text3D.cjs.js"),t=require("./Center.cjs.js");function n(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("@babel/runtime/helpers/extends"),require("@react-three/fiber"),require("three-stdlib"),require("./useFont.cjs.js"),require("suspend-react"),require("three");var c=n(e);const a=c.forwardRef((({font:e="/fonts/Inter_Bold.json",color:n="#cbcbcb",bevelSize:a=.04,debug:u=!1,children:l,...s},i)=>{const[o,b]=c.useState(0),f=c.useCallback(((e=1)=>b(o+e)),[o]),d=c.useCallback(((e=1)=>b(o-e)),[o]),m=c.useMemo((()=>({incr:f,decr:d})),[f,d]);return c.useImperativeHandle(i,(()=>m),[m]),c.createElement("group",s,c.createElement(t.Center,{top:!0,cacheKey:JSON.stringify({counter:o,font:e})},c.createElement(r.Text3D,{bevelEnabled:!0,bevelSize:a,font:e},o,u?c.createElement("meshNormalMaterial",{wireframe:!0}):c.createElement("meshStandardMaterial",{color:n}))),l)}));exports.Example=a;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("./Text3D.cjs.js"),t=require("./Center.cjs.js");function a(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("@babel/runtime/helpers/extends"),require("@react-three/fiber"),require("three-stdlib"),require("./useFont.cjs.js"),require("suspend-react"),require("three");var c=a(e);const n=c.forwardRef((({font:e,color:a="#cbcbcb",bevelSize:n=.04,debug:l=!1,children:u,...s},i)=>{const[o,b]=c.useState(0),f=c.useCallback(((e=1)=>b(o+e)),[o]),d=c.useCallback(((e=1)=>b(o-e)),[o]),m=c.useMemo((()=>({incr:f,decr:d})),[f,d]);return c.useImperativeHandle(i,(()=>m),[m]),c.createElement("group",s,c.createElement(c.Suspense,{fallback:null},c.createElement(t.Center,{top:!0,cacheKey:JSON.stringify({counter:o,font:e})},c.createElement(r.Text3D,{bevelEnabled:!0,bevelSize:n,font:e},l?c.createElement("meshNormalMaterial",{wireframe:!0}):c.createElement("meshStandardMaterial",{color:a}),o))),u)}));exports.Example=n;

package/core/Example.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { type Color } from '@react-three/fiber';
 export declare type ExampleProps = {
+    font: string;
     color?: Color;
     debug?: boolean;
     bevelSize?: number;
-    font?: string;
 } & JSX.IntrinsicElements['group'];
 export declare type ExampleApi = {
     incr: (x?: number) => void;

package/core/Example.js

@@ -4,7 +4,7 @@ import { Center } from './Center.js';
 
 /* eslint react-hooks/exhaustive-deps: 1 */
 const Example = /*#__PURE__*/React.forwardRef(({
-  font = '/fonts/Inter_Bold.json',
+  font,
   color = '#cbcbcb',
   bevelSize = 0.04,
   debug = false,
@@ -20,7 +20,9 @@ const Example = /*#__PURE__*/React.forwardRef(({
     decr
   }), [incr, decr]);
   React.useImperativeHandle(fref, () => api, [api]);
-  return /*#__PURE__*/React.createElement("group", props, /*#__PURE__*/React.createElement(Center, {
+  return /*#__PURE__*/React.createElement("group", props, /*#__PURE__*/React.createElement(React.Suspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(Center, {
     top: true,
     cacheKey: JSON.stringify({
       counter,
@@ -30,11 +32,11 @@ const Example = /*#__PURE__*/React.forwardRef(({
     bevelEnabled: true,
     bevelSize: bevelSize,
     font: font
-  }, counter, debug ? /*#__PURE__*/React.createElement("meshNormalMaterial", {
+  }, debug ? /*#__PURE__*/React.createElement("meshNormalMaterial", {
     wireframe: true
   }) : /*#__PURE__*/React.createElement("meshStandardMaterial", {
     color: color
-  }))), children);
+  }), counter))), children);
 });
 
 export { Example };