@react-three/rapier 0.16.0-canary.0 → 0.16.0-canary.1

package/dist/declarations/src/components/InstancedRigidBodies.d.ts

@@ -9,4 +9,4 @@ export interface InstancedRigidBodiesProps extends RigidBodyProps {
     colliderNodes?: ReactNode[];
     children: ReactNode;
 }
-export declare const InstancedRigidBodies: React.MemoExoticComponent<React.ForwardRefExoticComponent<InstancedRigidBodiesProps & React.RefAttributes<(RapierRigidBody | null)[]>>>;
+export declare const InstancedRigidBodies: React.MemoExoticComponent<React.ForwardRefExoticComponent<InstancedRigidBodiesProps & React.RefAttributes<(RapierRigidBody | null)[] | null>>>;

package/dist/declarations/src/hooks/use-forwarded-ref.d.ts

@@ -0,0 +1,2 @@
+import { ForwardedRef, MutableRefObject } from "react";
+export declare const useForwardedRef: <T>(forwardedRef: ForwardedRef<T>, defaultValue?: T | null) => MutableRefObject<T>;

package/dist/react-three-rapier.cjs.dev.js

@@ -1119,6 +1119,20 @@ const euler = ({
   return new three.Euler(x, y, z);
 };
 
+const useForwardedRef = (forwardedRef, defaultValue = null) => {
+  const innerRef = React.useRef(defaultValue); // Update the forwarded ref when the inner ref changes
+
+  if (forwardedRef && typeof forwardedRef !== "function") {
+    if (!forwardedRef.current) {
+      forwardedRef.current = innerRef.current;
+    }
+
+    return forwardedRef;
+  }
+
+  return innerRef;
+};
+
 /**
  * A collider is a shape that can be attached to a rigid body to define its physical properties.
  * @internal
@@ -1138,24 +1152,30 @@ const AnyCollider = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((prop
     colliderStates
   } = useRapier();
   const rigidBodyContext = useRigidBodyContext();
-  const ref = React.useRef(null); // We spread the props out here to make sure that the ref is updated when the props change.
+  const colliderRef = useForwardedRef(forwardedRef);
+  const objectRef = React.useRef(null); // We spread the props out here to make sure that the ref is updated when the props change.
 
   const immutablePropArray = immutableColliderOptions.flatMap(key => Array.isArray(props[key]) ? [...props[key]] : props[key]);
   const getInstance = useImperativeInstance(() => {
-    const worldScale = ref.current.getWorldScale(vec3());
+    const worldScale = objectRef.current.getWorldScale(vec3());
     const collider = createColliderFromOptions(props, world, worldScale, rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.getRigidBody);
+
+    if (typeof forwardedRef == "function") {
+      forwardedRef(collider);
+    }
+
+    colliderRef.current = collider;
     return collider;
   }, collider => {
     world.removeCollider(collider);
   }, [...immutablePropArray, rigidBodyContext]);
   React.useEffect(() => {
     const collider = getInstance();
-    colliderStates.set(collider.handle, createColliderState(collider, ref.current, rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.ref.current));
+    colliderStates.set(collider.handle, createColliderState(collider, objectRef.current, rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.ref.current));
     return () => {
       colliderStates.delete(collider.handle);
     };
   }, [getInstance]);
-  React.useImperativeHandle(forwardedRef, () => getInstance(), [getInstance]);
   const mergedProps = React.useMemo(() => {
     return _objectSpread2(_objectSpread2({}, cleanRigidBodyPropsForCollider(rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.options)), props);
   }, [props, rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.options]);
@@ -1166,7 +1186,7 @@ const AnyCollider = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((prop
     rotation: rotation,
     quaternion: quaternion,
     scale: scale,
-    ref: ref,
+    ref: objectRef,
     name: name
   }, children);
 }));
@@ -1454,7 +1474,8 @@ const RigidBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((props,
   } = props,
         objectProps = _objectWithoutProperties(props, _excluded$1);
 
-  const ref = React.useRef(null);
+  const objectRef = React.useRef(null);
+  const rigidBodyRef = useForwardedRef(forwardedRef);
   const {
     world,
     rigidBodyStates,
@@ -1469,11 +1490,17 @@ const RigidBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((props,
   const immutablePropArray = immutableRigidBodyOptions.flatMap(key => {
     return Array.isArray(mergedOptions[key]) ? [...mergedOptions[key]] : mergedOptions[key];
   });
-  const childColliderProps = useChildColliderProps(ref, mergedOptions); // Provide a way to eagerly create rigidbody
+  const childColliderProps = useChildColliderProps(objectRef, mergedOptions); // Provide a way to eagerly create rigidbody
 
   const getRigidBody = useImperativeInstance(() => {
     const desc = rigidBodyDescFromOptions(mergedOptions);
     const rigidBody = world.createRigidBody(desc);
+
+    if (typeof forwardedRef === "function") {
+      forwardedRef(rigidBody);
+    }
+
+    rigidBodyRef.current = rigidBody;
     return rigidBody;
   }, rigidBody => {
     world.removeRigidBody(rigidBody);
@@ -1483,7 +1510,7 @@ const RigidBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((props,
     const rigidBody = getRigidBody();
     const state = createRigidBodyState({
       rigidBody,
-      object: ref.current
+      object: objectRef.current
     });
     rigidBodyStates.set(rigidBody.handle, props.transformState ? props.transformState(state) : state);
     return () => {
@@ -1492,10 +1519,9 @@ const RigidBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((props,
   }, [getRigidBody]);
   useUpdateRigidBodyOptions(getRigidBody, mergedOptions, rigidBodyStates);
   useRigidBodyEvents(getRigidBody, mergedOptions, rigidBodyEvents);
-  React.useImperativeHandle(forwardedRef, () => getRigidBody(), [getRigidBody]);
   const contextValue = React.useMemo(() => {
     return {
-      ref,
+      ref: objectRef,
       getRigidBody: getRigidBody,
       options: mergedOptions
     };
@@ -1503,7 +1529,7 @@ const RigidBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((props,
   return /*#__PURE__*/React__default["default"].createElement(RigidBodyContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React__default["default"].createElement("object3D", _extends({
-    ref: ref
+    ref: objectRef
   }, objectProps, {
     position: position,
     rotation: rotation,
@@ -1550,9 +1576,10 @@ const MeshCollider = /*#__PURE__*/React.memo(props => {
 MeshCollider.displayName = "MeshCollider";
 
 const _excluded = ["children", "instances", "colliderNodes", "position", "rotation", "quaternion", "scale"];
-const InstancedRigidBodies = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((props, ref) => {
-  const object = React.useRef(null);
-  const instancedWrapper = React.useRef(null);
+const InstancedRigidBodies = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
+  const rigidBodiesRef = useForwardedRef(forwardedRef, []);
+  const objectRef = React.useRef(null);
+  const instanceWrapperRef = React.useRef(null);
 
   const {
     // instanced props
@@ -1567,14 +1594,12 @@ const InstancedRigidBodies = /*#__PURE__*/React.memo( /*#__PURE__*/React.forward
   } = props,
         rigidBodyProps = _objectWithoutProperties(props, _excluded);
 
-  const rigidBodyApis = React.useRef([]);
-  React.useImperativeHandle(ref, () => rigidBodyApis.current, [instances]);
-  const childColliderProps = useChildColliderProps(object, _objectSpread2(_objectSpread2({}, props), {}, {
+  const childColliderProps = useChildColliderProps(objectRef, _objectSpread2(_objectSpread2({}, props), {}, {
     children: undefined
   }));
 
   const getInstancedMesh = () => {
-    const firstChild = instancedWrapper.current.children[0];
+    const firstChild = instanceWrapperRef.current.children[0];
 
     if (firstChild && "isInstancedMesh" in firstChild) {
       return firstChild;
@@ -1614,16 +1639,16 @@ const InstancedRigidBodies = /*#__PURE__*/React.memo( /*#__PURE__*/React.forward
   };
 
   return /*#__PURE__*/React__default["default"].createElement("object3D", _extends({
-    ref: object
+    ref: objectRef
   }, rigidBodyProps, {
     position: position,
     rotation: rotation,
     quaternion: quaternion,
     scale: scale
   }), /*#__PURE__*/React__default["default"].createElement("object3D", {
-    ref: instancedWrapper
+    ref: instanceWrapperRef
   }, children), instances === null || instances === void 0 ? void 0 : instances.map((instance, index) => /*#__PURE__*/React__default["default"].createElement(RigidBody, _extends({}, rigidBodyProps, instance, {
-    ref: body => rigidBodyApis.current[index] = body,
+    ref: body => rigidBodiesRef.current[index] = body,
     transformState: state => applyInstancedState(state, index)
   }), /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, colliderNodes.map((node, index) => /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
     key: index
@@ -1645,7 +1670,8 @@ const useImpulseJoint = (body1, body2, params) => {
   useImperativeInstance(() => {
     if (body1.current && body2.current) {
       const newJoint = world.createImpulseJoint(params, body1.current, body2.current);
-      jointRef.current = newJoint;
+      jointRef.current = newJoint; // console.log(body1.current, body2.current, newJoint);
+
       return newJoint;
     }
   }, joint => {

package/dist/react-three-rapier.cjs.prod.js

@@ -1119,6 +1119,20 @@ const euler = ({
   return new three.Euler(x, y, z);
 };
 
+const useForwardedRef = (forwardedRef, defaultValue = null) => {
+  const innerRef = React.useRef(defaultValue); // Update the forwarded ref when the inner ref changes
+
+  if (forwardedRef && typeof forwardedRef !== "function") {
+    if (!forwardedRef.current) {
+      forwardedRef.current = innerRef.current;
+    }
+
+    return forwardedRef;
+  }
+
+  return innerRef;
+};
+
 /**
  * A collider is a shape that can be attached to a rigid body to define its physical properties.
  * @internal
@@ -1138,24 +1152,30 @@ const AnyCollider = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((prop
     colliderStates
   } = useRapier();
   const rigidBodyContext = useRigidBodyContext();
-  const ref = React.useRef(null); // We spread the props out here to make sure that the ref is updated when the props change.
+  const colliderRef = useForwardedRef(forwardedRef);
+  const objectRef = React.useRef(null); // We spread the props out here to make sure that the ref is updated when the props change.
 
   const immutablePropArray = immutableColliderOptions.flatMap(key => Array.isArray(props[key]) ? [...props[key]] : props[key]);
   const getInstance = useImperativeInstance(() => {
-    const worldScale = ref.current.getWorldScale(vec3());
+    const worldScale = objectRef.current.getWorldScale(vec3());
     const collider = createColliderFromOptions(props, world, worldScale, rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.getRigidBody);
+
+    if (typeof forwardedRef == "function") {
+      forwardedRef(collider);
+    }
+
+    colliderRef.current = collider;
     return collider;
   }, collider => {
     world.removeCollider(collider);
   }, [...immutablePropArray, rigidBodyContext]);
   React.useEffect(() => {
     const collider = getInstance();
-    colliderStates.set(collider.handle, createColliderState(collider, ref.current, rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.ref.current));
+    colliderStates.set(collider.handle, createColliderState(collider, objectRef.current, rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.ref.current));
     return () => {
       colliderStates.delete(collider.handle);
     };
   }, [getInstance]);
-  React.useImperativeHandle(forwardedRef, () => getInstance(), [getInstance]);
   const mergedProps = React.useMemo(() => {
     return _objectSpread2(_objectSpread2({}, cleanRigidBodyPropsForCollider(rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.options)), props);
   }, [props, rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.options]);
@@ -1166,7 +1186,7 @@ const AnyCollider = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((prop
     rotation: rotation,
     quaternion: quaternion,
     scale: scale,
-    ref: ref,
+    ref: objectRef,
     name: name
   }, children);
 }));
@@ -1454,7 +1474,8 @@ const RigidBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((props,
   } = props,
         objectProps = _objectWithoutProperties(props, _excluded$1);
 
-  const ref = React.useRef(null);
+  const objectRef = React.useRef(null);
+  const rigidBodyRef = useForwardedRef(forwardedRef);
   const {
     world,
     rigidBodyStates,
@@ -1469,11 +1490,17 @@ const RigidBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((props,
   const immutablePropArray = immutableRigidBodyOptions.flatMap(key => {
     return Array.isArray(mergedOptions[key]) ? [...mergedOptions[key]] : mergedOptions[key];
   });
-  const childColliderProps = useChildColliderProps(ref, mergedOptions); // Provide a way to eagerly create rigidbody
+  const childColliderProps = useChildColliderProps(objectRef, mergedOptions); // Provide a way to eagerly create rigidbody
 
   const getRigidBody = useImperativeInstance(() => {
     const desc = rigidBodyDescFromOptions(mergedOptions);
     const rigidBody = world.createRigidBody(desc);
+
+    if (typeof forwardedRef === "function") {
+      forwardedRef(rigidBody);
+    }
+
+    rigidBodyRef.current = rigidBody;
     return rigidBody;
   }, rigidBody => {
     world.removeRigidBody(rigidBody);
@@ -1483,7 +1510,7 @@ const RigidBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((props,
     const rigidBody = getRigidBody();
     const state = createRigidBodyState({
       rigidBody,
-      object: ref.current
+      object: objectRef.current
     });
     rigidBodyStates.set(rigidBody.handle, props.transformState ? props.transformState(state) : state);
     return () => {
@@ -1492,10 +1519,9 @@ const RigidBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((props,
   }, [getRigidBody]);
   useUpdateRigidBodyOptions(getRigidBody, mergedOptions, rigidBodyStates);
   useRigidBodyEvents(getRigidBody, mergedOptions, rigidBodyEvents);
-  React.useImperativeHandle(forwardedRef, () => getRigidBody(), [getRigidBody]);
   const contextValue = React.useMemo(() => {
     return {
-      ref,
+      ref: objectRef,
       getRigidBody: getRigidBody,
       options: mergedOptions
     };
@@ -1503,7 +1529,7 @@ const RigidBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((props,
   return /*#__PURE__*/React__default["default"].createElement(RigidBodyContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React__default["default"].createElement("object3D", _extends({
-    ref: ref
+    ref: objectRef
   }, objectProps, {
     position: position,
     rotation: rotation,
@@ -1550,9 +1576,10 @@ const MeshCollider = /*#__PURE__*/React.memo(props => {
 MeshCollider.displayName = "MeshCollider";
 
 const _excluded = ["children", "instances", "colliderNodes", "position", "rotation", "quaternion", "scale"];
-const InstancedRigidBodies = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((props, ref) => {
-  const object = React.useRef(null);
-  const instancedWrapper = React.useRef(null);
+const InstancedRigidBodies = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
+  const rigidBodiesRef = useForwardedRef(forwardedRef, []);
+  const objectRef = React.useRef(null);
+  const instanceWrapperRef = React.useRef(null);
 
   const {
     // instanced props
@@ -1567,14 +1594,12 @@ const InstancedRigidBodies = /*#__PURE__*/React.memo( /*#__PURE__*/React.forward
   } = props,
         rigidBodyProps = _objectWithoutProperties(props, _excluded);
 
-  const rigidBodyApis = React.useRef([]);
-  React.useImperativeHandle(ref, () => rigidBodyApis.current, [instances]);
-  const childColliderProps = useChildColliderProps(object, _objectSpread2(_objectSpread2({}, props), {}, {
+  const childColliderProps = useChildColliderProps(objectRef, _objectSpread2(_objectSpread2({}, props), {}, {
     children: undefined
   }));
 
   const getInstancedMesh = () => {
-    const firstChild = instancedWrapper.current.children[0];
+    const firstChild = instanceWrapperRef.current.children[0];
 
     if (firstChild && "isInstancedMesh" in firstChild) {
       return firstChild;
@@ -1614,16 +1639,16 @@ const InstancedRigidBodies = /*#__PURE__*/React.memo( /*#__PURE__*/React.forward
   };
 
   return /*#__PURE__*/React__default["default"].createElement("object3D", _extends({
-    ref: object
+    ref: objectRef
   }, rigidBodyProps, {
     position: position,
     rotation: rotation,
     quaternion: quaternion,
     scale: scale
   }), /*#__PURE__*/React__default["default"].createElement("object3D", {
-    ref: instancedWrapper
+    ref: instanceWrapperRef
   }, children), instances === null || instances === void 0 ? void 0 : instances.map((instance, index) => /*#__PURE__*/React__default["default"].createElement(RigidBody, _extends({}, rigidBodyProps, instance, {
-    ref: body => rigidBodyApis.current[index] = body,
+    ref: body => rigidBodiesRef.current[index] = body,
     transformState: state => applyInstancedState(state, index)
   }), /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, colliderNodes.map((node, index) => /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
     key: index
@@ -1645,7 +1670,8 @@ const useImpulseJoint = (body1, body2, params) => {
   useImperativeInstance(() => {
     if (body1.current && body2.current) {
       const newJoint = world.createImpulseJoint(params, body1.current, body2.current);
-      jointRef.current = newJoint;
+      jointRef.current = newJoint; // console.log(body1.current, body2.current, newJoint);
+
       return newJoint;
     }
   }, joint => {

package/dist/react-three-rapier.esm.js

@@ -1,7 +1,7 @@
 import { ActiveEvents, ColliderDesc, EventQueue, RigidBodyDesc } from '@dimforge/rapier3d-compat';
 export { CoefficientCombineRule, Collider as RapierCollider, RigidBody as RapierRigidBody } from '@dimforge/rapier3d-compat';
 import { useFrame, useThree } from '@react-three/fiber';
-import React, { useRef, useEffect, memo, useMemo, useContext, useState, useCallback, createContext, forwardRef, useImperativeHandle, Fragment } from 'react';
+import React, { useRef, useEffect, memo, useMemo, useContext, useState, useCallback, createContext, forwardRef, Fragment } from 'react';
 import { Quaternion, Euler, Vector3, Object3D, Matrix4, BufferAttribute, MathUtils, DynamicDrawUsage } from 'three';
 import { useAsset } from 'use-asset';
 import { mergeVertices } from 'three-stdlib';
@@ -1094,6 +1094,20 @@ const euler = ({
   return new Euler(x, y, z);
 };
 
+const useForwardedRef = (forwardedRef, defaultValue = null) => {
+  const innerRef = useRef(defaultValue); // Update the forwarded ref when the inner ref changes
+
+  if (forwardedRef && typeof forwardedRef !== "function") {
+    if (!forwardedRef.current) {
+      forwardedRef.current = innerRef.current;
+    }
+
+    return forwardedRef;
+  }
+
+  return innerRef;
+};
+
 /**
  * A collider is a shape that can be attached to a rigid body to define its physical properties.
  * @internal
@@ -1113,24 +1127,30 @@ const AnyCollider = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, forwarded
     colliderStates
   } = useRapier();
   const rigidBodyContext = useRigidBodyContext();
-  const ref = useRef(null); // We spread the props out here to make sure that the ref is updated when the props change.
+  const colliderRef = useForwardedRef(forwardedRef);
+  const objectRef = useRef(null); // We spread the props out here to make sure that the ref is updated when the props change.
 
   const immutablePropArray = immutableColliderOptions.flatMap(key => Array.isArray(props[key]) ? [...props[key]] : props[key]);
   const getInstance = useImperativeInstance(() => {
-    const worldScale = ref.current.getWorldScale(vec3());
+    const worldScale = objectRef.current.getWorldScale(vec3());
     const collider = createColliderFromOptions(props, world, worldScale, rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.getRigidBody);
+
+    if (typeof forwardedRef == "function") {
+      forwardedRef(collider);
+    }
+
+    colliderRef.current = collider;
     return collider;
   }, collider => {
     world.removeCollider(collider);
   }, [...immutablePropArray, rigidBodyContext]);
   useEffect(() => {
     const collider = getInstance();
-    colliderStates.set(collider.handle, createColliderState(collider, ref.current, rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.ref.current));
+    colliderStates.set(collider.handle, createColliderState(collider, objectRef.current, rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.ref.current));
     return () => {
       colliderStates.delete(collider.handle);
     };
   }, [getInstance]);
-  useImperativeHandle(forwardedRef, () => getInstance(), [getInstance]);
   const mergedProps = useMemo(() => {
     return _objectSpread2(_objectSpread2({}, cleanRigidBodyPropsForCollider(rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.options)), props);
   }, [props, rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.options]);
@@ -1141,7 +1161,7 @@ const AnyCollider = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, forwarded
     rotation: rotation,
     quaternion: quaternion,
     scale: scale,
-    ref: ref,
+    ref: objectRef,
     name: name
   }, children);
 }));
@@ -1429,7 +1449,8 @@ const RigidBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, forwardedRe
   } = props,
         objectProps = _objectWithoutProperties(props, _excluded$1);
 
-  const ref = useRef(null);
+  const objectRef = useRef(null);
+  const rigidBodyRef = useForwardedRef(forwardedRef);
   const {
     world,
     rigidBodyStates,
@@ -1444,11 +1465,17 @@ const RigidBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, forwardedRe
   const immutablePropArray = immutableRigidBodyOptions.flatMap(key => {
     return Array.isArray(mergedOptions[key]) ? [...mergedOptions[key]] : mergedOptions[key];
   });
-  const childColliderProps = useChildColliderProps(ref, mergedOptions); // Provide a way to eagerly create rigidbody
+  const childColliderProps = useChildColliderProps(objectRef, mergedOptions); // Provide a way to eagerly create rigidbody
 
   const getRigidBody = useImperativeInstance(() => {
     const desc = rigidBodyDescFromOptions(mergedOptions);
     const rigidBody = world.createRigidBody(desc);
+
+    if (typeof forwardedRef === "function") {
+      forwardedRef(rigidBody);
+    }
+
+    rigidBodyRef.current = rigidBody;
     return rigidBody;
   }, rigidBody => {
     world.removeRigidBody(rigidBody);
@@ -1458,7 +1485,7 @@ const RigidBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, forwardedRe
     const rigidBody = getRigidBody();
     const state = createRigidBodyState({
       rigidBody,
-      object: ref.current
+      object: objectRef.current
     });
     rigidBodyStates.set(rigidBody.handle, props.transformState ? props.transformState(state) : state);
     return () => {
@@ -1467,10 +1494,9 @@ const RigidBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, forwardedRe
   }, [getRigidBody]);
   useUpdateRigidBodyOptions(getRigidBody, mergedOptions, rigidBodyStates);
   useRigidBodyEvents(getRigidBody, mergedOptions, rigidBodyEvents);
-  useImperativeHandle(forwardedRef, () => getRigidBody(), [getRigidBody]);
   const contextValue = useMemo(() => {
     return {
-      ref,
+      ref: objectRef,
       getRigidBody: getRigidBody,
       options: mergedOptions
     };
@@ -1478,7 +1504,7 @@ const RigidBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, forwardedRe
   return /*#__PURE__*/React.createElement(RigidBodyContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement("object3D", _extends({
-    ref: ref
+    ref: objectRef
   }, objectProps, {
     position: position,
     rotation: rotation,
@@ -1525,9 +1551,10 @@ const MeshCollider = /*#__PURE__*/memo(props => {
 MeshCollider.displayName = "MeshCollider";
 
 const _excluded = ["children", "instances", "colliderNodes", "position", "rotation", "quaternion", "scale"];
-const InstancedRigidBodies = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, ref) => {
-  const object = useRef(null);
-  const instancedWrapper = useRef(null);
+const InstancedRigidBodies = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const rigidBodiesRef = useForwardedRef(forwardedRef, []);
+  const objectRef = useRef(null);
+  const instanceWrapperRef = useRef(null);
 
   const {
     // instanced props
@@ -1542,14 +1569,12 @@ const InstancedRigidBodies = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props,
   } = props,
         rigidBodyProps = _objectWithoutProperties(props, _excluded);
 
-  const rigidBodyApis = useRef([]);
-  useImperativeHandle(ref, () => rigidBodyApis.current, [instances]);
-  const childColliderProps = useChildColliderProps(object, _objectSpread2(_objectSpread2({}, props), {}, {
+  const childColliderProps = useChildColliderProps(objectRef, _objectSpread2(_objectSpread2({}, props), {}, {
     children: undefined
   }));
 
   const getInstancedMesh = () => {
-    const firstChild = instancedWrapper.current.children[0];
+    const firstChild = instanceWrapperRef.current.children[0];
 
     if (firstChild && "isInstancedMesh" in firstChild) {
       return firstChild;
@@ -1589,16 +1614,16 @@ const InstancedRigidBodies = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props,
   };
 
   return /*#__PURE__*/React.createElement("object3D", _extends({
-    ref: object
+    ref: objectRef
   }, rigidBodyProps, {
     position: position,
     rotation: rotation,
     quaternion: quaternion,
     scale: scale
   }), /*#__PURE__*/React.createElement("object3D", {
-    ref: instancedWrapper
+    ref: instanceWrapperRef
   }, children), instances === null || instances === void 0 ? void 0 : instances.map((instance, index) => /*#__PURE__*/React.createElement(RigidBody, _extends({}, rigidBodyProps, instance, {
-    ref: body => rigidBodyApis.current[index] = body,
+    ref: body => rigidBodiesRef.current[index] = body,
     transformState: state => applyInstancedState(state, index)
   }), /*#__PURE__*/React.createElement(React.Fragment, null, colliderNodes.map((node, index) => /*#__PURE__*/React.createElement(Fragment, {
     key: index
@@ -1620,7 +1645,8 @@ const useImpulseJoint = (body1, body2, params) => {
   useImperativeInstance(() => {
     if (body1.current && body2.current) {
       const newJoint = world.createImpulseJoint(params, body1.current, body2.current);
-      jointRef.current = newJoint;
+      jointRef.current = newJoint; // console.log(body1.current, body2.current, newJoint);
+
       return newJoint;
     }
   }, joint => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/rapier",
-  "version": "0.16.0-canary.0",
+  "version": "0.16.0-canary.1",
   "source": "src/index.ts",
   "main": "dist/react-three-rapier.cjs.js",
   "module": "dist/react-three-rapier.esm.js",