feat: react 19 support

.changeset/empty-pears-suffer.md

@@ -0,0 +1,8 @@
+---
+"@react-three/rapier-addons": minor
+"@react-three/rapier": minor
+---
+
+feat: remove deprecated Vector3Array, Vector4Array, Boolean3Array types
+
+use Vector3Tuple, Vector4Tuple, Boolean3Tuple instead

.changeset/pre.json

@@ -0,0 +1,10 @@
+{
+  "mode": "pre",
+  "tag": "canary",
+  "initialVersions": {
+    "demo": "0.0.0",
+    "@react-three/rapier": "1.5.0",
+    "@react-three/rapier-addons": "4.0.1"
+  },
+  "changesets": []
+}

.changeset/rude-keys-carry.md

@@ -0,0 +1,6 @@
+---
+"@react-three/rapier-addons": major
+"@react-three/rapier": major
+---
+
+feat: react 19 support

.nvmrc

@@ -0,0 +1 @@
+v22.0.0

demo/package.json

@@ -9,23 +9,25 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@react-three/csg": "1.1.5",
-    "@react-three/drei": "9.112.0",
-    "@react-three/fiber": "8.17.7",
+    "@react-three/csg": "3.3.0",
+    "@react-three/drei": "10.0.0-rc.1",
+    "@react-three/fiber": "9.0.0-rc.5",
     "@react-three/rapier": "1.5.0",
     "@react-three/rapier-addons": "4.0.1",
-    "@types/three": "0.168.0",
-    "leva": "0.9.35",
-    "r3f-perf": "7.2.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-router-dom": "6.4.3",
-    "three": "0.168.0"
+    "@types/three": "0.172.0",
+    "leva": "0.10.0",
+    "r3f-perf": "7.2.3",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-router-dom": "7.1.3",
+    "three": "0.172.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "4.3.1",
-    "typescript": "4.6.3",
-    "vite": "3.0.3"
+    "@types/react": "19.0.8",
+    "@types/react-dom": "19.0.3",
+    "@vitejs/plugin-react": "4.3.4",
+    "typescript": "5.7.3",
+    "vite": "6.0.11"
   },
   "repository": "https://github.com/pmndrs/react-three-rapier/tree/master/demo"
 }

demo/src/App.tsx

@@ -3,6 +3,7 @@ import { Canvas } from "@react-three/fiber";
 import { Physics, RigidBody } from "@react-three/rapier";
 import { Perf } from "r3f-perf";
 import {
+  JSX,
   ReactNode,
   StrictMode,
   Suspense,
@@ -117,7 +118,7 @@ export const App = () => {
   const [interpolate, setInterpolate] = useState<boolean>(true);
   const [physicsKey, setPhysicsKey] = useState<number>(0);
   const [cameraEnabled, setCameraEnabled] = useState<boolean>(true);
-  const orbitControlRef = useRef<OrbitControlsImpl>(null);
+  const orbitControlRef = useRef<OrbitControlsImpl>(null!);
 
   useResetOrbitControls();
 

demo/src/examples/all-colliders/AllCollidersExample.tsx

@@ -1,5 +1,5 @@
 import { Box, Cone, Cylinder, Html, Sphere } from "@react-three/drei";
-import { MeshProps, Object3DProps } from "@react-three/fiber";
+import { ThreeElements } from "@react-three/fiber";
 import {
   BallCollider,
   CapsuleCollider,
@@ -21,7 +21,10 @@ import { PlaneGeometry } from "three";
 import { useEffect, useRef } from "react";
 import { useResetOrbitControls } from "../../hooks/use-reset-orbit-controls";
 
-const CuteBox = (props: Omit<MeshProps, "args">) => (
+type Object3DProps = ThreeElements["object3D"];
+type MeshProps = ThreeElements["mesh"];
+
+const CuteBox = (props: Omit<MeshProps, "args" | "ref">) => (
   <Box castShadow receiveShadow {...props}>
     <meshPhysicalMaterial color="orange" />
   </Box>

demo/src/examples/car/CarExample.tsx

@@ -4,7 +4,7 @@ import {
   RapierRigidBody,
   RigidBody,
   useRevoluteJoint,
-  Vector3Array
+  Vector3Tuple
 } from "@react-three/rapier";
 import { createRef, RefObject, useRef } from "react";
 import { Demo } from "../../App";
@@ -19,9 +19,9 @@ const WheelJoint = ({
 }: {
   body: RefObject<RapierRigidBody>;
   wheel: RefObject<RapierRigidBody>;
-  bodyAnchor: Vector3Array;
-  wheelAnchor: Vector3Array;
-  rotationAxis: Vector3Array;
+  bodyAnchor: Vector3Tuple;
+  wheelAnchor: Vector3Tuple;
+  rotationAxis: Vector3Tuple;
 }) => {
   const joint = useRevoluteJoint(body, wheel, [
     bodyAnchor,
@@ -39,15 +39,17 @@ const WheelJoint = ({
 };
 
 export const Car: Demo = () => {
-  const bodyRef = useRef<RapierRigidBody>(null);
+  const bodyRef = useRef<RapierRigidBody>(null!);
   const wheelPositions: [number, number, number][] = [
     [-3, 0, 2],
     [-3, 0, -2],
     [3, 0, 2],
     [3, 0, -2]
   ];
   const wheelRefs = useRef(
-    wheelPositions.map(() => createRef<RapierRigidBody>())
+    wheelPositions.map(() =>
+      createRef<RapierRigidBody>()
+    ) as RefObject<RapierRigidBody>[]
   );
 
   useResetOrbitControls(30);

demo/src/examples/components/ComponentsExample.tsx

@@ -1,12 +1,14 @@
-import React, { useMemo, useState } from "react";
+import React, { useState } from "react";
 
 import { Box, Clone, Sphere, useGLTF } from "@react-three/drei";
 import { RigidBody, TrimeshCollider } from "@react-three/rapier";
-import { GroupProps, Object3DNode, useFrame } from "@react-three/fiber";
+import { ThreeElements } from "@react-three/fiber";
 import { Mesh } from "three";
 import { Demo } from "../../App";
 import { useResetOrbitControls } from "../../hooks/use-reset-orbit-controls";
 
+type GroupProps = ThreeElements["group"];
+
 const Map = () => {
   const { nodes } = useGLTF(
     // @ts-ignore

demo/src/examples/contact-force-events/ContactForceEventsExample.tsx

@@ -1,5 +1,5 @@
-import { Box, Plane, Sphere } from "@react-three/drei";
-import { MeshPhysicalMaterialProps } from "@react-three/fiber";
+import { Box, Sphere } from "@react-three/drei";
+import { ThreeElements } from "@react-three/fiber";
 import {
   RigidBody,
   RapierRigidBody,
@@ -11,6 +11,8 @@ import { Color } from "three";
 import { Demo } from "../../App";
 import { useResetOrbitControls } from "../../hooks/use-reset-orbit-controls";
 
+type MeshPhysicalMaterialProps = ThreeElements["meshPhysicalMaterial"];
+
 type BallProps = { onContactForce: RigidBodyProps["onContactForce"] };
 const Ball = ({ onContactForce }: BallProps) => {
   const ball = useRef<RapierRigidBody>(null);

demo/src/examples/cradle/CradleExample.tsx

@@ -12,8 +12,8 @@ import { Demo } from "../../App";
 import { useResetOrbitControls } from "../../hooks/use-reset-orbit-controls";
 
 const Rod = (props: RigidBodyOptions) => {
-  const anchor = useRef<RapierRigidBody>(null);
-  const rod = useRef<RapierRigidBody>(null);
+  const anchor = useRef<RapierRigidBody>(null!);
+  const rod = useRef<RapierRigidBody>(null!);
 
   useSphericalJoint(anchor, rod, [
     [0, 0, 0],

demo/src/examples/joints/JointsExample.tsx

@@ -4,18 +4,16 @@ import {
   forwardRef,
   ReactNode,
   RefObject,
-  useEffect,
   useRef
 } from "react";
 import {
   RigidBody,
   RapierRigidBody,
   RigidBodyTypeString,
   useSphericalJoint,
-  Vector3Array,
+  Vector3Tuple,
   usePrismaticJoint
 } from "@react-three/rapier";
-import { useImperativeHandle } from "react";
 import { useFrame } from "@react-three/fiber";
 import { Demo } from "../../App";
 import { Mesh, Quaternion } from "three";
@@ -28,7 +26,7 @@ const ShadowElement = forwardRef<Mesh>((_, ref) => (
 ));
 
 type RopeSegmentProps = {
-  position: Vector3Array;
+  position: Vector3Tuple;
   component: ReactNode;
   type: RigidBodyTypeString;
 };
@@ -60,7 +58,7 @@ const RopeJoint = ({
 
 const Rope = (props: { component: ReactNode; length: number }) => {
   const refs = useRef(
-    Array.from({ length: props.length }).map(() => createRef<RapierRigidBody>())
+    Array.from({ length: props.length }).map(() => createRef<RapierRigidBody>()) as RefObject<RapierRigidBody>[]
   );
 
   useFrame(() => {
@@ -92,8 +90,8 @@ const Rope = (props: { component: ReactNode; length: number }) => {
 };
 
 const PrismaticExample = () => {
-  const box1 = useRef<RapierRigidBody>(null);
-  const box2 = useRef<RapierRigidBody>(null);
+  const box1 = useRef<RapierRigidBody>(null!);
+  const box2 = useRef<RapierRigidBody>(null!);
   const joint = usePrismaticJoint(box1, box2, [
     [-4, 0, 0],
     [0, 4, 0],

demo/src/examples/performance/PeformanceExample.tsx

@@ -1,5 +1,5 @@
 import { useGLTF } from "@react-three/drei";
-import { GroupProps, useFrame } from "@react-three/fiber";
+import { ThreeElements, useFrame } from "@react-three/fiber";
 import { RigidBody, RigidBodyProps } from "@react-three/rapier";
 import { RapierRigidBody } from "@react-three/rapier";
 import { ReactNode, useEffect, useRef, useState } from "react";
@@ -8,6 +8,8 @@ import { GLTF } from "three-stdlib";
 import { useSuzanne } from "../all-shapes/AllShapesExample";
 import { useResetOrbitControls } from "../../hooks/use-reset-orbit-controls";
 
+type GroupProps = ThreeElements["group"];
+
 const useBendy = () => {
   return useGLTF(
     new URL("../../models/bendy.glb", import.meta.url).toString()

demo/src/examples/plinko/Plinko.tsx

@@ -3,10 +3,11 @@ Auto-generated by: https://github.com/pmndrs/gltfjsx
 */
 
 import { useGLTF } from "@react-three/drei";
-import type { GLTF } from "three-stdlib";
-import { useEffect, useRef } from "react";
-import { Group, Mesh, MeshPhysicalMaterial, MeshStandardMaterial } from "three";
+import { ThreeElements } from "@react-three/fiber";
 import { RigidBody } from "@react-three/rapier";
+import { useRef } from "react";
+import { Group, Mesh, MeshPhysicalMaterial, MeshStandardMaterial } from "three";
+import type { GLTF } from "three-stdlib";
 import { useDemo } from "../../App";
 import { useResetOrbitControls } from "../../hooks/use-reset-orbit-controls";
 
@@ -23,9 +24,8 @@ type GLTFResult = GLTF & {
   };
 };
 
-export default function Plinko({ ...props }: JSX.IntrinsicElements["group"]) {
+export default function Plinko({ ...props }: ThreeElements["group"]) {
   const group = useRef<Group>(null);
-  const { orbitControlRef } = useDemo();
 
   const { nodes, materials } = useGLTF(
     // @ts-ignore

demo/src/examples/rope-joint/RopeJointExample.tsx

@@ -78,8 +78,8 @@ const RopeJoint = ({
   ballPosition,
   ropeLength
 }: RopeJointProps) => {
-  const anchor = useRef<RapierRigidBody>(null);
-  const ball = useRef<RapierRigidBody>(null);
+  const anchor = useRef<RapierRigidBody>(null!);
+  const ball = useRef<RapierRigidBody>(null!);
 
   useRopeJoint(anchor, ball, [[0, 0, 0], [0, 0, 0], ropeLength]);
 

demo/src/examples/snapshot/SnapshotExample.tsx

@@ -24,7 +24,7 @@ export const SnapshotExample: Demo = () => {
   const balls = Array.from(Array(10).keys());
 
   const { world, setWorld, rapier } = useRapier();
-  const worldSnapshot = useRef<Uint8Array>();
+  const worldSnapshot = useRef<Uint8Array>(null!);
 
   useControls({
     takeSnapshot: button(() => (worldSnapshot.current = world.takeSnapshot())),

demo/src/examples/spring/SpringExample.tsx

@@ -37,7 +37,7 @@ const BoxRigidBody = ({ color, ...props }: BoxRigidBodyProps) => {
 const BallSpring = forwardRef<RapierRigidBody, BallSpringProps>(
   (props, floorRef) => {
     const floor = useForwardedRef(floorRef);
-    const ball = useRef<RapierRigidBody>(null);
+    const ball = useRef<RapierRigidBody>(null!);
 
     const stiffness = 1.0e3;
     const criticalDamping = 2.0 * Math.sqrt(stiffness * (props.mass ?? 1));

package.json

@@ -29,13 +29,13 @@
     "@manypkg/cli": "0.19.1",
     "@preconstruct/cli": "2.8.8",
     "@testing-library/react": "14.0.0",
-    "@vitejs/plugin-react": "4.3.1",
+    "@vitejs/plugin-react": "4.3.4",
     "@vitest/ui": "1.2.2",
     "jsdom": "24.0.0",
     "prettier": "2.7.1",
     "simple-git-hooks": "2.8.0",
     "typedoc": "0.23.24",
-    "typescript": "4.6.3",
+    "typescript": "5.7.3",
     "vitest": "1.2.2",
     "vitest-canvas-mock": "0.3.3"
   },
@@ -61,5 +61,6 @@
   "workspaces": [
     "packages/*",
     "demo"
-  ]
+  ],
+  "packageManager": "yarn@1.22.21+sha1.1959a18351b811cdeedbd484a8f86c3cc3bbaf72"
 }

packages/react-three-rapier-addons/package.json

@@ -8,18 +8,21 @@
   "peerDependencies": {
     "@react-three/fiber": "*",
     "@react-three/rapier": "^1.3.1",
-    "react": ">=18.0.0",
+    "react": "^19",
     "three": "*"
   },
   "dependencies": {
-    "three-stdlib": "^2.29.4"
+    "three-stdlib": "^2.35.12"
   },
   "devDependencies": {
-    "@react-three/fiber": "8.17.7",
-    "@react-three/rapier": "^1.3.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "three": "0.168.0"
+    "@react-three/drei": "10.0.0-rc.1",
+    "@react-three/fiber": "9.0.0-rc.5",
+    "@react-three/rapier": "1.5.0",
+    "@types/react": "19.0.8",
+    "@types/react-dom": "19.0.3",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "three": "0.172.0"
   },
   "repository": "https://github.com/pmndrs/react-three-rapier/tree/master/packages/react-three-rapier-addons"
 }

packages/react-three-rapier-addons/src/addons/attractor/Attractor.tsx

@@ -3,9 +3,11 @@ import { InteractionGroups, RigidBody } from "@dimforge/rapier3d-compat";
 import { useBeforePhysicsStep, useRapier } from "@react-three/rapier";
 import { FC, memo, useRef } from "react";
 import { Object3D, Vector3 } from "three";
-import { Object3DProps } from "@react-three/fiber";
+import { ThreeElements } from "@react-three/fiber";
 import { AttractorDebugHelper } from "./AttractorDebugHelper";
 
+type Object3DProps = ThreeElements["object3D"];
+
 export type AttractorGravityType = "static" | "linear" | "newtonian";
 
 export interface AttractorProps {
@@ -138,7 +140,7 @@ export const Attractor: FC<AttractorProps> = memo((props) => {
     gravitationalConstant = 6.673e-11,
     collisionGroups
   } = props;
-  const object = useRef<Object3D>(null);
+  const object = useRef<Object3D>(null!);
   const { isDebug } = useRapier();
 
   useBeforePhysicsStep((world) => {

packages/react-three-rapier-addons/src/addons/attractor/AttractorDebugHelper.tsx

@@ -18,8 +18,8 @@ export const AttractorDebugHelper = (
   }
 ) => {
   const { scene } = useThree();
-  const ref = useRef<Mesh>();
-  const normalsHelper = useRef<VertexNormalsHelper>();
+  const ref = useRef<Mesh>(null!);
+  const normalsHelper = useRef<VertexNormalsHelper>(null!);
   const color = props.strength > 0 ? 0x0000ff : 0xff0000;
 
   useEffect(() => {