drei - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

dist/index.cjs.js

@@ -12,2 +12,3 @@ 'use strict';
 var OrbitControls$1 = require('three/examples/jsm/controls/OrbitControls');
+var mergeRefs = _interopDefault(require('react-merge-refs'));
 var DRACOLoader = require('three/examples/jsm/loaders/DRACOLoader');
@@ -18,3 +19,3 @@
 });
-function OrbitControls(props) {
+var OrbitControls = React.forwardRef(function (props, ref) {
   if (props === void 0) {
@@ -38,6 +39,6 @@ props = {
   return /*#__PURE__*/React__default.createElement("orbitControlsImpl", _extends({
-    ref: controls,
+    ref: mergeRefs([controls, ref]),
     args: [camera, gl.domElement]
   }, props));
-}
+});
 
@@ -47,3 +48,3 @@ reactThreeFiber.extend({
 });
-function MapControls(props) {
+var MapControls = React.forwardRef(function (props, ref) {
   if (props === void 0) {
@@ -67,6 +68,6 @@ props = {
   return /*#__PURE__*/React__default.createElement("mapControlsImpl", _extends({
-    ref: controls,
+    ref: mergeRefs([controls, ref]),
     args: [camera, gl.domElement]
   }, props));
-}
+});
 
@@ -73,0 +74,0 @@ function draco(url) {

dist/index.js

 import _extends from '@babel/runtime/helpers/esm/extends';
-import React, { useRef } from 'react';
+import React, { forwardRef, useRef } from 'react';
 import { extend, useThree, useFrame } from 'react-three-fiber';
 import { OrbitControls as OrbitControls$1, MapControls as MapControls$1 } from 'three/examples/jsm/controls/OrbitControls';
+import mergeRefs from 'react-merge-refs';
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
@@ -10,5 +11,5 @@
 });
-function OrbitControls(props = {
+const OrbitControls = forwardRef((props = {
   enableDamping: true
-}) {
+}, ref) => {
   const controls = useRef();
@@ -25,6 +26,6 @@ const {
   return /*#__PURE__*/React.createElement("orbitControlsImpl", _extends({
-    ref: controls,
+    ref: mergeRefs([controls, ref]),
     args: [camera, gl.domElement]
   }, props));
-}
+});
 
@@ -34,5 +35,5 @@ extend({
 });
-function MapControls(props = {
+const MapControls = forwardRef((props = {
   enableDamping: true
-}) {
+}, ref) => {
   const controls = useRef();
@@ -49,6 +50,6 @@ const {
   return /*#__PURE__*/React.createElement("mapControlsImpl", _extends({
-    ref: controls,
+    ref: mergeRefs([controls, ref]),
     args: [camera, gl.domElement]
   }, props));
-}
+});
 
@@ -55,0 +56,0 @@ function draco(url = '/draco-gltf/') {

dist/MapControls.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 import { ReactThreeFiber } from 'react-three-fiber';
@@ -12,3 +12,3 @@ import { MapControls as MapControlsImpl } from 'three/examples/jsm/controls/OrbitControls';
 }
-export declare function MapControls(props?: MapControls): JSX.Element;
+export declare const MapControls: React.ForwardRefExoticComponent<Pick<ReactThreeFiber.Object3DNode<MapControlsImpl, typeof MapControlsImpl>, "object" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "dispose" | "domElement" | "enabled" | "target" | "center" | "minDistance" | "maxDistance" | "minZoom" | "maxZoom" | "minPolarAngle" | "maxPolarAngle" | "minAzimuthAngle" | "maxAzimuthAngle" | "enableDamping" | "dampingFactor" | "enableZoom" | "zoomSpeed" | "enableRotate" | "rotateSpeed" | "enablePan" | "panSpeed" | "screenSpacePanning" | "keyPanSpeed" | "autoRotate" | "autoRotateSpeed" | "enableKeys" | "keys" | "mouseButtons" | "touches" | "update" | "saveState" | "reset" | "getPolarAngle" | "getAzimuthalAngle" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onClick" | "onPointerUp" | "onPointerDown" | "onPointerOver" | "onPointerOut" | "onPointerMove" | "onWheel"> & React.RefAttributes<unknown>>;
 export {};

dist/OrbitControls.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 import { ReactThreeFiber } from 'react-three-fiber';
@@ -12,3 +12,3 @@ import { OrbitControls as OrbitControlsImpl } from 'three/examples/jsm/controls/OrbitControls';
 }
-export declare function OrbitControls(props?: OrbitControls): JSX.Element;
+export declare const OrbitControls: React.ForwardRefExoticComponent<Pick<ReactThreeFiber.Object3DNode<OrbitControlsImpl, typeof OrbitControlsImpl>, "object" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "dispose" | "domElement" | "enabled" | "target" | "center" | "minDistance" | "maxDistance" | "minZoom" | "maxZoom" | "minPolarAngle" | "maxPolarAngle" | "minAzimuthAngle" | "maxAzimuthAngle" | "enableDamping" | "dampingFactor" | "enableZoom" | "zoomSpeed" | "enableRotate" | "rotateSpeed" | "enablePan" | "panSpeed" | "screenSpacePanning" | "keyPanSpeed" | "autoRotate" | "autoRotateSpeed" | "enableKeys" | "keys" | "mouseButtons" | "touches" | "update" | "saveState" | "reset" | "getPolarAngle" | "getAzimuthalAngle" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onClick" | "onPointerUp" | "onPointerDown" | "onPointerOver" | "onPointerOut" | "onPointerMove" | "onWheel"> & React.RefAttributes<unknown>>;
 export {};

dist/TrackballControls.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 import { ReactThreeFiber } from 'react-three-fiber';
@@ -12,3 +12,3 @@ import { TrackballControls as TrackballControlsImpl } from 'three/examples/jsm/controls/TrackballControls';
 }
-export declare function TrackballControls(props: TrackballControls): JSX.Element;
+export declare const TrackballControls: React.ForwardRefExoticComponent<Pick<ReactThreeFiber.Object3DNode<TrackballControlsImpl, typeof TrackballControlsImpl>, "object" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "dispose" | "domElement" | "enabled" | "target" | "minDistance" | "maxDistance" | "zoomSpeed" | "rotateSpeed" | "panSpeed" | "keys" | "update" | "reset" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onClick" | "onPointerUp" | "onPointerDown" | "onPointerOver" | "onPointerOut" | "onPointerMove" | "onWheel" | "screen" | "noRotate" | "noZoom" | "noPan" | "noRoll" | "staticMoving" | "dynamicDampingFactor" | "position0" | "target0" | "up0" | "checkDistances" | "zoomCamera" | "panCamera" | "rotateCamera" | "handleResize"> & React.RefAttributes<unknown>>;
 export {};

dist/TransformControls.d.ts

@@ -0,5 +1,5 @@
+import { Object3D } from 'three';
 import React from 'react';
 import { ReactThreeFiber } from 'react-three-fiber';
 import { TransformControls as TransformControlsImpl } from 'three/examples/jsm/controls/TransformControls';
-import { Object3D } from 'three';
 declare type TransformControls = ReactThreeFiber.Object3DNode<TransformControlsImpl, typeof TransformControlsImpl>;
@@ -13,5 +13,12 @@ declare global {
 }
-export declare function TransformControls({ children, ...props }: {
-    children: React.ReactElement<Object3D>;
-} & TransformControls): JSX.Element;
+export declare const TransformControls: React.ForwardRefExoticComponent<Pick<{
+    children: React.ReactElement<Object3D, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+} & Pick<import("react-three-fiber").Overwrite<Partial<TransformControlsImpl>, ReactThreeFiber.NodeProps<TransformControlsImpl, typeof TransformControlsImpl>>, "object" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "ref" | "key" | "onUpdate" | "domElement" | "enabled" | "mouseButtons" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "camera" | "quaternion" | "axis" | "mode" | "translationSnap" | "rotationSnap" | "space" | "size" | "dragging" | "showX" | "showY" | "showZ" | "isTransformControls" | "detach" | "getMode" | "setMode" | "setTranslationSnap" | "setRotationSnap" | "setSize" | "setSpace" | "id" | "uuid" | "name" | "type" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "layers" | "visible" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy"> & {
+    position?: import("three").Vector3 | [number, number, number] | undefined;
+    up?: import("three").Vector3 | [number, number, number] | undefined;
+    scale?: import("three").Vector3 | [number, number, number] | undefined;
+    rotation?: import("three").Euler | [number, number, number, (string | undefined)?] | undefined;
+    matrix?: import("three").Matrix4 | [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number] | undefined;
+    dispose?: (() => void) | null | undefined;
+} & ReactThreeFiber.Events, "object" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "dispose" | "domElement" | "enabled" | "mouseButtons" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onClick" | "onPointerUp" | "onPointerDown" | "onPointerOver" | "onPointerOut" | "onPointerMove" | "onWheel" | "camera" | "quaternion" | "axis" | "mode" | "translationSnap" | "rotationSnap" | "space" | "size" | "dragging" | "showX" | "showY" | "showZ" | "isTransformControls" | "detach" | "getMode" | "setMode" | "setTranslationSnap" | "setRotationSnap" | "setSize" | "setSpace" | "id" | "uuid" | "name" | "type" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "layers" | "visible" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy"> & React.RefAttributes<unknown>>;
 export {};

package.json

 {
   "name": "drei",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "useful add-ons for react-three-fiber",
@@ -47,3 +47,4 @@ "main": "dist/index.cjs.js",
   "dependencies": {
-    "@babel/runtime": "^7.9.2"
+    "@babel/runtime": "^7.9.2",
+    "react-merge-refs": "^1.0.0"
   },
@@ -50,0 +51,0 @@ "devDependencies": {

README.md

@@ -5,4 +5,2 @@ [![Build Status](https://travis-ci.org/react-spring/drei.svg?branch=master)](https://travis-ci.org/react-spring/drei) [![npm version](https://badge.fury.io/js/drei.svg)](https://badge.fury.io/js/drei) ![npm](https://img.shields.io/npm/dt/drei.svg)
 
-**PR's are more than welcome!** If you find yourself repeating set-up code often and if it's generic enough to be useful, add it here, everyone benefits.
-
 <br />
@@ -18,2 +16,4 @@
 
+### Exports
+
 - [x] OrbitControls, `<OrbitControls enableDamping ... />`
@@ -24,1 +24,11 @@ - [x] MapControls, `<MapControls enableDamping ... />`
 - [x] draco, `useLoader(GLTFLoader, url, draco())`
+
+### Contributions
+
+**PR's are more than welcome!** If you find yourself repeating set-up code often and if it's generic enough to be useful, add it here, everyone benefits.
+
+### Requirements
+
+- Types
+- ForwardRefs if possible, so that objects can be referenced
+- Cleanup on unmount, no left-overs

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

25952

increased by42.92%

Lines of code

450

increased by8.43%

Number of lines in readme file

32

increased by45.45%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Addedreact-merge-refs@^1.0.0

• + Addedreact-merge-refs@1.1.0(transitive)