From fe828cc55422a278f2ac4619a565873cc0bbfbdb Mon Sep 17 00:00:00 2001
From: Michael Bashurov <accounts@saitonakamura.me>
Date: Sat, 4 Mar 2023 20:25:19 +0200
Subject: [PATCH] docs: fixed some ts issues in the examples

---
 examples/src/demos/HitTest.tsx     | 10 +++++-----
 examples/src/demos/Interactive.tsx |  6 +++---
 examples/src/demos/Player.tsx      |  2 +-
 examples/src/demos/Text.tsx        |  5 +++--
 4 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/examples/src/demos/HitTest.tsx b/examples/src/demos/HitTest.tsx
index 86306f49..b2fcab33 100644
--- a/examples/src/demos/HitTest.tsx
+++ b/examples/src/demos/HitTest.tsx
@@ -1,11 +1,11 @@
 import { Box } from '@react-three/drei'
 import { Canvas } from '@react-three/fiber'
 import { Controllers, useHitTest, ARButton, XR } from '@react-three/xr'
-import React from 'react'
-import * as THREE from 'three'
+import React, { ComponentProps } from 'react'
+import { type Mesh } from 'three'
 
-export function HitTestExample(props: JSX.IntrinsicElements['mesh']) {
-  const boxRef = React.useRef<THREE.Mesh>(null)
+export function HitTestExample(props: ComponentProps<typeof Box>) {
+  const boxRef = React.useRef<Mesh>(null)
 
   useHitTest((hitMatrix) => {
     if (boxRef.current) {
@@ -19,7 +19,7 @@ export function HitTestExample(props: JSX.IntrinsicElements['mesh']) {
 export default function () {
   return (
     <>
-      <ARButton onError={(e) => console.error(e)} />
+      <ARButton />
       <Canvas>
         <XR>
           <ambientLight intensity={0.5} />
diff --git a/examples/src/demos/Interactive.tsx b/examples/src/demos/Interactive.tsx
index 828ccff2..b789fdf6 100644
--- a/examples/src/demos/Interactive.tsx
+++ b/examples/src/demos/Interactive.tsx
@@ -1,9 +1,9 @@
 import { Box } from '@react-three/drei'
 import { Canvas } from '@react-three/fiber'
 import { Controllers, Interactive, VRButton, XR } from '@react-three/xr'
-import React from 'react'
+import React, { ComponentProps } from 'react'
 
-export function Button(props: JSX.IntrinsicElements['mesh']) {
+export function Button(props: ComponentProps<typeof Box>) {
   const [hover, setHover] = React.useState(false)
   const [color, setColor] = React.useState(0x123456)
 
@@ -19,7 +19,7 @@ export function Button(props: JSX.IntrinsicElements['mesh']) {
 export default function () {
   return (
     <>
-      <VRButton onError={(e) => console.error(e)} />
+      <VRButton />
       <Canvas>
         <XR>
           <ambientLight intensity={0.5} />
diff --git a/examples/src/demos/Player.tsx b/examples/src/demos/Player.tsx
index 6bebef86..0510f9d8 100644
--- a/examples/src/demos/Player.tsx
+++ b/examples/src/demos/Player.tsx
@@ -17,7 +17,7 @@ function PlayerExample() {
 export default function () {
   return (
     <>
-      <VRButton onError={(e) => console.error(e)} />
+      <VRButton />
       <Canvas>
         <XR>
           <ambientLight intensity={0.5} />
diff --git a/examples/src/demos/Text.tsx b/examples/src/demos/Text.tsx
index 8383bcb6..8ad5f2e9 100644
--- a/examples/src/demos/Text.tsx
+++ b/examples/src/demos/Text.tsx
@@ -1,8 +1,9 @@
 import { Box, Text } from '@react-three/drei'
 import { Canvas } from '@react-three/fiber'
 import { Controllers, VRButton, XR } from '@react-three/xr'
+import { ComponentProps } from 'react'
 
-export function BoxText(props: JSX.IntrinsicElements['mesh']) {
+export function BoxText(props: ComponentProps<typeof Box>) {
   return (
     <Box {...props} args={[0.4, 0.1, 0.1]}>
       <meshStandardMaterial color={0x0000ff} />
@@ -16,7 +17,7 @@ export function BoxText(props: JSX.IntrinsicElements['mesh']) {
 export default function () {
   return (
     <>
-      <VRButton onError={(e) => console.error(e)} />
+      <VRButton />
       <Canvas>
         <XR>
           <ambientLight intensity={0.5} />