feat: version 0.4.0

Author: birkir

README.md

@@ -13,17 +13,17 @@ https://codesandbox.io/s/react-three-fiber-gui-62pvp
 Basic example
 
 ```tsx
-import { ControlsProvider, Controls, useControl } from 'react-three-gui';
+import { Controls, useControl } from 'react-three-gui';
 
 export const App = () => {
   const rotationX = useControl('Rotation X', { type: 'number' });
   return (
-    <ControlsProvider>
-      <Canvas>
+    <Controls.Provider>
+      <Controls.Canvas>
         <mesh rotation-x={rotationX} />
-      </Canvas>
+      </Controls.Canvas>
       <Controls />
-    </ControlsProvider>
+    </Controls.Provider>
   );
 };
 ```
@@ -73,6 +73,32 @@ useControl('Test', {
 });
 ```
 
+## Use your own Canvas
+
+```tsx
+import { Canvas } from 'react-three-fiber';
+import { withControls } from 'react-three-gui';
+
+// Wrap the <Canvas> with `withControls`
+const YourCanvas = withControls(Canvas);
+
+const Scene = () => (
+  <YourCanvas>
+    <mesh rotation-x={rotationX} />
+  </YourCanvas>
+);
+
+const App = () => {
+  const rotationX = useControl('Rotation X', { type: 'number' });
+  return (
+    <Controls.Provider>
+      <Scene />
+      <Controls />
+    </Controls.Provider>
+  );
+};
+```
+
 ## API
 
 ```tsx

example/index.tsx

@@ -3,10 +3,10 @@ import 'react-app-polyfill/ie11';
 import * as ReactDOM from 'react-dom';
 import { animated } from 'react-spring';
 import { a } from '@react-spring/three';
-import { Canvas, useLoader } from 'react-three-fiber';
+import { Canvas } from 'react-three-fiber';
 import { Text } from 'drei';
 import * as THREE from 'three';
-import { Controls, ControlsProvider, useControl, BaseControl } from '../src';
+import { Controls, useControl, withControls } from '../src';
 import { useEffect } from 'react';
 
 const Next = () => {
@@ -18,7 +18,7 @@ const Next = () => {
   return (
     <a.mesh position={[1.5, 0, 0]} rotation-x={rotationX}>
       <boxGeometry attach="geometry" args={[1, 1, 1]} />
-      <meshStandardMaterial attach="material" />
+      <meshStandardMaterial attach="material" color="orange" />
     </a.mesh>
   );
 };
@@ -133,19 +133,39 @@ const Hello = () => {
   );
 };
 
+const Sample2 = () => {
+  const CtrlCanvas = withControls(Canvas);
+  return (
+    <CtrlCanvas style={{ width: 400, height: 400 }}>
+      <ambientLight intensity={1} />
+      <pointLight position={[0, 2, 2]} />
+      <Next />
+    </CtrlCanvas>
+  );
+};
+
+const Sample1 = () => {
+  return (
+    <Controls.Canvas style={{ width: 400, height: 400 }}>
+      <ambientLight intensity={1} />
+      <pointLight position={[0, 2, 2]} />
+      <React.Suspense fallback={null}>
+        <Box />
+      </React.Suspense>
+    </Controls.Canvas>
+  );
+};
+
 const App = () => {
   return (
-    <ControlsProvider>
-      <Canvas style={{ width: 800, height: 600 }}>
-        <ambientLight intensity={1} />
-        <pointLight position={[0, 2, 2]} />
-        <React.Suspense fallback={null}>
-          <Box />
-        </React.Suspense>
-      </Canvas>
+    <Controls.Provider>
+      <div style={{ display: 'flex', flexDirection: 'row' }}>
+        <Sample1 />
+        <Sample2 />
+      </div>
       <Hello />
       <Controls />
-    </ControlsProvider>
+    </Controls.Provider>
   );
 };
 

example/package.json

@@ -13,8 +13,6 @@
     "react-app-polyfill": "^1.0.6",
     "react-dom": ">= 16.8.0",
     "react-spring": "^8.0.27",
-    "react-three-fiber": "^4.2.20",
-    "three": "^0.120.0",
     "trim-right": "^1.0.1"
   },
   "alias": {

example/yarn.lock

@@ -898,7 +898,7 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/runtime@^7.11.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.11.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.8.4":
   version "7.11.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
   integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
@@ -976,11 +976,6 @@
   resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.3.tgz#f060bf6eaafae4d56a7dac618980838b0696e2ab"
   integrity sha512-FmuxfCuolpLl0AnQ2NHSzoUKWEJDFl63qXjzdoWBVyFCXzMGm1spBzk7LeHNoVCiWCF7mRVms9e6jEV9+MoPbg==
 
-"@juggle/resize-observer@^3.1.3":
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.2.0.tgz#5e0b448d27fe3091bae6216456512c5904d05661"
-  integrity sha512-fsLxt0CHx2HCV9EL8lDoVkwHffsA0snUpddYjdLyXcG5E41xaamn9ZyQqOE9TUJdrRlH8/hjIf+UdOdDeKCUgg==
-
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -2091,11 +2086,6 @@ deasync@^0.1.14:
     bindings "~1.2.1"
     node-addon-api "^1.6.0"
 
-debounce@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131"
-  integrity sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg==
-
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -4624,23 +4614,6 @@ react-merge-refs@^1.0.0:
   resolved "https://registry.yarnpkg.com/react-merge-refs/-/react-merge-refs-1.1.0.tgz#73d88b892c6c68cbb7a66e0800faa374f4c38b06"
   integrity sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ==
 
-react-promise-suspense@^0.3.2:
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/react-promise-suspense/-/react-promise-suspense-0.3.3.tgz#b085c7e0ac22b85fd3d605b1c4f181cda4310bc9"
-  integrity sha512-OdehKsCEWYoV6pMcwxbvJH99UrbXylmXJ1QpEL9OfHaUBzcAihyfSJV8jFq325M/wW9iKc/BoiLROXxMul+MxA==
-  dependencies:
-    fast-deep-equal "^2.0.1"
-
-react-reconciler@0.25.1:
-  version "0.25.1"
-  resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.25.1.tgz#f9814d59d115e1210762287ce987801529363aaa"
-  integrity sha512-R5UwsIvRcSs3w8n9k3tBoTtUHdVhu9u84EG7E5M0Jk9F5i6DA1pQzPfUZd6opYWGy56MJOtV3VADzy6DRwYDjw==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.19.1"
-
 react-spring@^8.0.27:
   version "8.0.27"
   resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-8.0.27.tgz#97d4dee677f41e0b2adcb696f3839680a3aa356a"
@@ -4649,29 +4622,6 @@ react-spring@^8.0.27:
     "@babel/runtime" "^7.3.1"
     prop-types "^15.5.8"
 
-react-three-fiber@^4.2.20:
-  version "4.2.20"
-  resolved "https://registry.yarnpkg.com/react-three-fiber/-/react-three-fiber-4.2.20.tgz#2689c005689f7c706cfb29bcf7f09958ff900b9a"
-  integrity sha512-M5TCdGNKvofe37VMXnhbabgRDiRm9rnfxOmMFuLa+H9FiiLT3wUMMgE9eBmLh3McKgYXURETWKkNDePeQ0J0JQ==
-  dependencies:
-    "@babel/runtime" "^7.9.2"
-    "@juggle/resize-observer" "^3.1.3"
-    react-merge-refs "^1.0.0"
-    react-promise-suspense "^0.3.2"
-    react-reconciler "0.25.1"
-    react-use-measure "^2.0.0"
-    resize-observer-polyfill "^1.5.1"
-    scheduler "0.19.1"
-    tiny-emitter "^2.1.0"
-    utility-types "^3.10.0"
-
-react-use-measure@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/react-use-measure/-/react-use-measure-2.0.1.tgz#4f23f94c832cd4512da55acb300d1915dcbf3ae8"
-  integrity sha512-lFfHiqcXbJ2/6aUkZwt8g5YYM7EGqNVxJhMqMPqv1BVXRKp8D7jYLlmma0SvhRY4WYxxkZpCdbJvhDylb5gcEA==
-  dependencies:
-    debounce "^1.2.0"
-
 "react@>= 16.8.0":
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
@@ -4851,11 +4801,6 @@ request@^2.88.0:
     tunnel-agent "^0.6.0"
     uuid "^3.3.2"
 
-resize-observer-polyfill@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
-  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
-
 resolve-from@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
@@ -4945,7 +4890,7 @@ saxes@^3.1.9:
   dependencies:
     xmlchars "^2.1.1"
 
-scheduler@0.19.1, scheduler@^0.19.1:
+scheduler@^0.19.1:
   version "0.19.1"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
   integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
@@ -5380,11 +5325,6 @@ terser@^4.1.2:
     source-map "~0.6.1"
     source-map-support "~0.5.12"
 
-three@^0.120.0:
-  version "0.120.0"
-  resolved "https://registry.yarnpkg.com/three/-/three-0.120.0.tgz#238ab7a9e5d92af6bab3d257ea2b1891c90aef63"
-  integrity sha512-Swffpi3EAHWkmqC1MagKEzR5XgwkDiyeWI3M7vkGbBc0xhq2LcQmJj5DqBruLkrgcZQ+fM/+fSQBU1tDvggO4A==
-
 through2@^2.0.0, through2@~2.0.3:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
@@ -5405,11 +5345,6 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
-tiny-emitter@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
-  integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
-
 tiny-inflate@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/tiny-inflate/-/tiny-inflate-1.0.2.tgz#93d9decffc8805bd57eae4310f0b745e9b6fb3a7"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-gui",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "main": "dist/index.js",
   "module": "dist/react-three-gui.esm.js",
   "typings": "dist/index.d.ts",

src/components/controls-provider.tsx

@@ -1,36 +1,7 @@
 import React, { useState, useRef } from 'react';
 import { ControlsContext } from '../contexts/controls-context';
-import { Canvas } from 'react-three-fiber';
+import { Canvas as R3FCanvas } from 'react-three-fiber';
 import { ControlItem } from 'types';
-import { isMemo } from 'react-is';
-
-const mapCanvasNode = (
-  children: React.ReactElement,
-  value: any
-): React.ReactElement[] => {
-  return React.Children.map(children, item => {
-    if (!item || !item.props) {
-      return null;
-    }
-
-    const isCanvas =
-      item.type === Canvas ||
-      (isMemo(item) && (item.type as any)?.type?.name === 'Canvas');
-
-    const childs = isCanvas ? (
-      <ControlsContext.Provider value={value}>
-        {item.props.children}
-      </ControlsContext.Provider>
-    ) : (
-      mapCanvasNode(item.props.children, value)
-    );
-
-    return React.cloneElement(item, {
-      ...item.props,
-      children: childs,
-    });
-  });
-};
 
 export const ControlsProvider = ({
   children,
@@ -63,11 +34,25 @@ export const ControlsProvider = ({
     },
   };
 
-  const childs = mapCanvasNode(children as React.ReactElement, context);
-
   return (
     <ControlsContext.Provider value={context}>
-      {childs}
+      {children}
     </ControlsContext.Provider>
   );
 };
+
+export function withControls(CanvasEl: typeof R3FCanvas) {
+  return ({ children, ...props }: any) => (
+    <ControlsContext.Consumer>
+      {value => (
+        <CanvasEl {...props}>
+          <ControlsContext.Provider value={value}>
+            {children}
+          </ControlsContext.Provider>
+        </CanvasEl>
+      )}
+    </ControlsContext.Consumer>
+  );
+}
+
+export const Canvas = withControls(R3FCanvas);

src/components/controls.tsx

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import { ControlsProvider, Canvas } from './controls-provider';
 import styled from 'styled-components';
 import { animated, useSpring, to } from '@react-spring/web';
 import { useDrag } from 'react-use-gesture';
@@ -159,7 +160,13 @@ const groupByGroup = (items: any): any => {
   }, {} as { [key: string]: any });
 };
 
-export const Controls = (props: ControlsProps) => {
+interface ControlsFn {
+  (props: ControlsProps): JSX.Element;
+  Provider: typeof ControlsProvider;
+  Canvas: typeof Canvas;
+}
+
+export const Controls: ControlsFn = (props: ControlsProps) => {
   const {
     title = 'react-three-gui',
     defaultClosedGroups = [],
@@ -261,3 +268,6 @@ export const Controls = (props: ControlsProps) => {
     </Float>
   );
 };
+
+Controls.Provider = ControlsProvider;
+Controls.Canvas = Canvas;

src/index.ts

@@ -1,5 +1,6 @@
 export { Controls } from './components/controls';
-export { ControlsProvider } from './components/controls-provider';
+export { withControls } from './components/controls-provider';
 export { useControl } from './hooks/use-control';
 export { BaseControl } from './components/controls/base-control';
+export { ControlsContext } from './contexts/controls-context';
 export * from './types';

src/utils.ts

@@ -31,8 +31,10 @@ export const defaultValue = (options: ControlOptions) => {
   return undefined;
 };
 
-export const clamp = (num: number, clamp: number, higher: number) =>
-  higher ? Math.min(Math.max(num, clamp), higher) : Math.min(num, clamp);
+export const clamp = (num: number, clamp: number, higher?: number) =>
+  higher !== undefined
+    ? Math.min(Math.max(num, clamp), higher)
+    : Math.min(num, clamp);
 
 export const map = (
   value: number,