@react-three/fiber 8.8.10 → 8.9.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @react-three/fiber
 
+## 8.9.0
+
+### Minor Changes
+
+- a458b4dd: fix(loop): export flush methods and types
+
+## 8.8.11
+
+### Patch Changes
+
+- 2068f0cc: fix: events pointerlock, useLoader extension types
+
 ## 8.8.10
 
 ### Patch Changes

package/dist/declarations/src/core/hooks.d.ts

@@ -4,13 +4,16 @@ import { StateSelector, EqualityChecker } from 'zustand';
 import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
 import { RootState, RenderCallback } from './store';
 import { ObjectMap } from './utils';
-import { LoadingManager } from 'three';
 import { LocalState } from './renderer';
 export interface Loader<T> extends THREE.Loader {
     load(url: string, onLoad?: (result: T) => void, onProgress?: (event: ProgressEvent) => void, onError?: (event: ErrorEvent) => void): unknown;
 }
-export declare type Extensions = (loader: THREE.Loader) => void;
+export declare type LoaderProto<T> = new (...args: any) => Loader<T extends unknown ? any : T>;
+export declare type LoaderReturnType<T, L extends LoaderProto<T>> = T extends unknown ? Awaited<ReturnType<InstanceType<L>['loadAsync']>> : T;
 export declare type LoaderResult<T> = T extends any[] ? Loader<T[number]> : Loader<T>;
+export declare type Extensions<T extends {
+    prototype: LoaderProto<any>;
+}> = (loader: T['prototype']) => void;
 export declare type ConditionalType<Child, Parent, Truthy, Falsy> = Child extends Parent ? Truthy : Falsy;
 export declare type BranchingReturn<T, Parent, Coerced> = ConditionalType<T, Parent, Coerced, T>;
 export declare function useInstanceHandle<O>(ref: React.MutableRefObject<O>): React.MutableRefObject<LocalState>;
@@ -18,8 +21,8 @@ export declare function useStore(): import("zustand").UseBoundStore<RootState, i
 export declare function useThree<T = RootState>(selector?: StateSelector<RootState, T>, equalityFn?: EqualityChecker<T>): T;
 export declare function useFrame(callback: RenderCallback, renderPriority?: number): null;
 export declare function useGraph(object: THREE.Object3D): ObjectMap;
-export declare function useLoader<T, U extends string | string[]>(Proto: new (manager?: LoadingManager) => LoaderResult<T>, input: U, extensions?: Extensions, onProgress?: (event: ProgressEvent<EventTarget>) => void): U extends any[] ? BranchingReturn<T, GLTF, GLTF & ObjectMap>[] : BranchingReturn<T, GLTF, GLTF & ObjectMap>;
+export declare function useLoader<T, U extends string | string[], L extends LoaderProto<T>, R = LoaderReturnType<T, L>>(Proto: L, input: U, extensions?: Extensions<L>, onProgress?: (event: ProgressEvent<EventTarget>) => void): U extends any[] ? BranchingReturn<R, GLTF, GLTF & ObjectMap>[] : BranchingReturn<R, GLTF, GLTF & ObjectMap>;
 export declare namespace useLoader {
-    var preload: <T, U extends string | string[]>(Proto: new () => LoaderResult<T>, input: U, extensions?: Extensions | undefined) => undefined;
-    var clear: <T, U extends string | string[]>(Proto: new () => LoaderResult<T>, input: U) => void;
+    var preload: <T, U extends string | string[], L extends LoaderProto<T>>(Proto: L, input: U, extensions?: Extensions<L> | undefined) => undefined;
+    var clear: <T, U extends string | string[], L extends LoaderProto<T>>(Proto: L, input: U) => void;
 }

package/dist/declarations/src/core/index.d.ts

@@ -5,7 +5,7 @@ import { UseBoundStore } from 'zustand';
 import * as ReactThreeFiber from '../three-types';
 import { Renderer, context, RootState, Size, Dpr, Performance, PrivateKeys } from './store';
 import { extend, Root } from './renderer';
-import { addEffect, addAfterEffect, addTail } from './loop';
+import { addEffect, addAfterEffect, addTail, flushGlobalEffects } from './loop';
 import { EventManager, ComputeFunction } from './events';
 import { dispose, getRootState, Camera } from './utils';
 declare const roots: Map<Element, Root>;
@@ -54,4 +54,4 @@ export declare type InjectState = Partial<Omit<RootState, PrivateKeys> & {
 declare function createPortal(children: React.ReactNode, container: THREE.Object3D, state?: InjectState): JSX.Element;
 declare const act: any;
 export * from './hooks';
-export { context, render, createRoot, unmountComponentAtNode, createPortal, reconciler, applyProps, dispose, invalidate, advance, extend, addEffect, addAfterEffect, addTail, getRootState, act, roots as _roots, };
+export { context, render, createRoot, unmountComponentAtNode, createPortal, reconciler, applyProps, dispose, invalidate, advance, extend, addEffect, addAfterEffect, addTail, flushGlobalEffects, getRootState, act, roots as _roots, };

package/dist/declarations/src/core/loop.d.ts

@@ -1,7 +1,7 @@
 import * as THREE from 'three';
 import { Root } from './renderer';
 import { RootState } from './store';
-declare type GlobalRenderCallback = (timeStamp: number) => void;
+export declare type GlobalRenderCallback = (timeStamp: number) => void;
 export declare const addEffect: (callback: GlobalRenderCallback) => () => void;
 export declare const addAfterEffect: (callback: GlobalRenderCallback) => () => void;
 export declare const addTail: (callback: GlobalRenderCallback) => () => void;
@@ -12,4 +12,3 @@ export declare function createLoop<TCanvas>(roots: Map<TCanvas, Root>): {
     invalidate: (state?: RootState | undefined, frames?: number) => void;
     advance: (timestamp: number, runGlobalEffects?: boolean, state?: RootState | undefined, frame?: THREE.XRFrame | undefined) => void;
 };
-export {};

package/dist/declarations/src/index.d.ts

@@ -4,8 +4,9 @@ export { ReactThreeFiber };
 export type { BaseInstance, LocalState } from './core/renderer';
 export type { Intersection, Subscription, Dpr, Size, Viewport, RenderCallback, Performance, RootState, } from './core/store';
 export type { ThreeEvent, Events, EventManager, ComputeFunction } from './core/events';
+export { createEvents } from './core/events';
 export type { ObjectMap, Camera } from './core/utils';
 export * from './web/Canvas';
-export { createEvents } from './core/events';
 export { createPointerEvents as events } from './web/events';
+export type { GlobalRenderCallback, GlobalEffectType } from './core/loop';
 export * from './core';

package/dist/declarations/src/native.d.ts

@@ -4,7 +4,9 @@ export { ReactThreeFiber };
 export type { BaseInstance, LocalState } from './core/renderer';
 export type { Intersection, Subscription, Dpr, Size, Viewport, RenderCallback, Performance, RootState, } from './core/store';
 export type { ThreeEvent, Events, EventManager, ComputeFunction } from './core/events';
+export { createEvents } from './core/events';
 export type { ObjectMap, Camera } from './core/utils';
 export * from './native/Canvas';
 export { createTouchEvents as events } from './native/events';
+export type { GlobalRenderCallback, GlobalEffectType } from './core/loop';
 export * from './core';

package/dist/{index-bd4f185a.cjs.prod.js → index-57cb2f85.cjs.prod.js}

@@ -579,7 +579,7 @@ function createEvents(store) {
     .sort((a, b) => {
       const aState = getRootState(a.object);
       const bState = getRootState(b.object);
-      if (!aState || !bState) return 0;
+      if (!aState || !bState) return a.distance - b.distance;
       return bState.events.priority - aState.events.priority || a.distance - b.distance;
     }) // Filter out duplicates
     .filter(item => {
@@ -608,7 +608,7 @@ function createEvents(store) {
 
     if ('pointerId' in event && state.internal.capturedMap.has(event.pointerId)) {
       for (let captureData of state.internal.capturedMap.get(event.pointerId).values()) {
-        intersections.push(captureData.intersection);
+        if (!duplicates.has(makeId(captureData.intersection))) intersections.push(captureData.intersection);
       }
     }
 
@@ -777,7 +777,7 @@ function createEvents(store) {
             internal
           } = store.getState();
 
-          if ('pointerId' in event && !internal.capturedMap.has(event.pointerId)) {
+          if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
             // If the object event interface had onLostPointerCapture, we'd call it here on every
             // object that's getting removed.
             internal.capturedMap.delete(event.pointerId);
@@ -2195,6 +2195,7 @@ exports.createPortal = createPortal;
 exports.createRoot = createRoot;
 exports.dispose = dispose;
 exports.extend = extend;
+exports.flushGlobalEffects = flushGlobalEffects;
 exports.getRootState = getRootState;
 exports.invalidate = invalidate;
 exports.isRef = isRef;

package/dist/{index-21f75f82.esm.js → index-6f0019d1.esm.js}

@@ -552,7 +552,7 @@ function createEvents(store) {
     .sort((a, b) => {
       const aState = getRootState(a.object);
       const bState = getRootState(b.object);
-      if (!aState || !bState) return 0;
+      if (!aState || !bState) return a.distance - b.distance;
       return bState.events.priority - aState.events.priority || a.distance - b.distance;
     }) // Filter out duplicates
     .filter(item => {
@@ -581,7 +581,7 @@ function createEvents(store) {
 
     if ('pointerId' in event && state.internal.capturedMap.has(event.pointerId)) {
       for (let captureData of state.internal.capturedMap.get(event.pointerId).values()) {
-        intersections.push(captureData.intersection);
+        if (!duplicates.has(makeId(captureData.intersection))) intersections.push(captureData.intersection);
       }
     }
 
@@ -750,7 +750,7 @@ function createEvents(store) {
             internal
           } = store.getState();
 
-          if ('pointerId' in event && !internal.capturedMap.has(event.pointerId)) {
+          if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
             // If the object event interface had onLostPointerCapture, we'd call it here on every
             // object that's getting removed.
             internal.capturedMap.delete(event.pointerId);
@@ -2154,4 +2154,4 @@ reconciler.injectIntoDevTools({
 });
 const act = React.unstable_act;
 
-export { useGraph as A, Block as B, useLoader as C, ErrorBoundary as E, createRoot as a, useIsomorphicLayoutEffect as b, createEvents as c, unmountComponentAtNode as d, extend as e, context as f, createPortal as g, reconciler as h, isRef as i, applyProps as j, dispose as k, invalidate as l, advance as m, addEffect as n, addAfterEffect as o, addTail as p, getRootState as q, render as r, act as s, threeTypes as t, useMutableCallback as u, roots as v, useInstanceHandle as w, useStore as x, useThree as y, useFrame as z };
+export { useFrame as A, Block as B, useGraph as C, useLoader as D, ErrorBoundary as E, createRoot as a, useIsomorphicLayoutEffect as b, createEvents as c, unmountComponentAtNode as d, extend as e, context as f, createPortal as g, reconciler as h, isRef as i, applyProps as j, dispose as k, invalidate as l, advance as m, addEffect as n, addAfterEffect as o, addTail as p, flushGlobalEffects as q, render as r, getRootState as s, threeTypes as t, useMutableCallback as u, act as v, roots as w, useInstanceHandle as x, useStore as y, useThree as z };

package/dist/{index-f307fe93.cjs.dev.js → index-8539ced2.cjs.dev.js}

@@ -579,7 +579,7 @@ function createEvents(store) {
     .sort((a, b) => {
       const aState = getRootState(a.object);
       const bState = getRootState(b.object);
-      if (!aState || !bState) return 0;
+      if (!aState || !bState) return a.distance - b.distance;
       return bState.events.priority - aState.events.priority || a.distance - b.distance;
     }) // Filter out duplicates
     .filter(item => {
@@ -608,7 +608,7 @@ function createEvents(store) {
 
     if ('pointerId' in event && state.internal.capturedMap.has(event.pointerId)) {
       for (let captureData of state.internal.capturedMap.get(event.pointerId).values()) {
-        intersections.push(captureData.intersection);
+        if (!duplicates.has(makeId(captureData.intersection))) intersections.push(captureData.intersection);
       }
     }
 
@@ -777,7 +777,7 @@ function createEvents(store) {
             internal
           } = store.getState();
 
-          if ('pointerId' in event && !internal.capturedMap.has(event.pointerId)) {
+          if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
             // If the object event interface had onLostPointerCapture, we'd call it here on every
             // object that's getting removed.
             internal.capturedMap.delete(event.pointerId);
@@ -2195,6 +2195,7 @@ exports.createPortal = createPortal;
 exports.createRoot = createRoot;
 exports.dispose = dispose;
 exports.extend = extend;
+exports.flushGlobalEffects = flushGlobalEffects;
 exports.getRootState = getRootState;
 exports.invalidate = invalidate;
 exports.isRef = isRef;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-f307fe93.cjs.dev.js');
+var index = require('./index-8539ced2.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -268,6 +268,7 @@ exports.createPortal = index.createPortal;
 exports.createRoot = index.createRoot;
 exports.dispose = index.dispose;
 exports.extend = index.extend;
+exports.flushGlobalEffects = index.flushGlobalEffects;
 exports.getRootState = index.getRootState;
 exports.invalidate = index.invalidate;
 exports.reconciler = index.reconciler;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-bd4f185a.cjs.prod.js');
+var index = require('./index-57cb2f85.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -268,6 +268,7 @@ exports.createPortal = index.createPortal;
 exports.createRoot = index.createRoot;
 exports.dispose = index.dispose;
 exports.extend = index.extend;
+exports.flushGlobalEffects = index.flushGlobalEffects;
 exports.getRootState = index.getRootState;
 exports.invalidate = index.invalidate;
 exports.reconciler = index.reconciler;

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

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, i as isRef, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-21f75f82.esm.js';
-export { t as ReactThreeFiber, v as _roots, s as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, f as context, c as createEvents, g as createPortal, a as createRoot, k as dispose, e as extend, q as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, z as useFrame, A as useGraph, w as useInstanceHandle, C as useLoader, x as useStore, y as useThree } from './index-21f75f82.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, i as isRef, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-6f0019d1.esm.js';
+export { t as ReactThreeFiber, w as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, f as context, c as createEvents, g as createPortal, a as createRoot, k as dispose, e as extend, q as flushGlobalEffects, s as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, A as useFrame, C as useGraph, x as useInstanceHandle, D as useLoader, y as useStore, z as useThree } from './index-6f0019d1.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';

package/native/dist/react-three-fiber-native.cjs.dev.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../dist/index-f307fe93.cjs.dev.js');
+var index = require('../../dist/index-8539ced2.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -402,10 +402,12 @@ exports.addTail = index.addTail;
 exports.advance = index.advance;
 exports.applyProps = index.applyProps;
 exports.context = index.context;
+exports.createEvents = index.createEvents;
 exports.createPortal = index.createPortal;
 exports.createRoot = index.createRoot;
 exports.dispose = index.dispose;
 exports.extend = index.extend;
+exports.flushGlobalEffects = index.flushGlobalEffects;
 exports.getRootState = index.getRootState;
 exports.invalidate = index.invalidate;
 exports.reconciler = index.reconciler;

package/native/dist/react-three-fiber-native.cjs.prod.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../dist/index-bd4f185a.cjs.prod.js');
+var index = require('../../dist/index-57cb2f85.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -402,10 +402,12 @@ exports.addTail = index.addTail;
 exports.advance = index.advance;
 exports.applyProps = index.applyProps;
 exports.context = index.context;
+exports.createEvents = index.createEvents;
 exports.createPortal = index.createPortal;
 exports.createRoot = index.createRoot;
 exports.dispose = index.dispose;
 exports.extend = index.extend;
+exports.flushGlobalEffects = index.flushGlobalEffects;
 exports.getRootState = index.getRootState;
 exports.invalidate = index.invalidate;
 exports.reconciler = index.reconciler;

package/native/dist/react-three-fiber-native.esm.js

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-21f75f82.esm.js';
-export { t as ReactThreeFiber, v as _roots, s as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, f as context, g as createPortal, a as createRoot, k as dispose, e as extend, q as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, z as useFrame, A as useGraph, w as useInstanceHandle, C as useLoader, x as useStore, y as useThree } from '../../dist/index-21f75f82.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-6f0019d1.esm.js';
+export { t as ReactThreeFiber, w as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, f as context, c as createEvents, g as createPortal, a as createRoot, k as dispose, e as extend, q as flushGlobalEffects, s as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, A as useFrame, C as useGraph, x as useInstanceHandle, D as useLoader, y as useStore, z as useThree } from '../../dist/index-6f0019d1.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "8.8.10",
+  "version": "8.9.0",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",

package/readme.md

@@ -10,112 +10,160 @@
 
 react-three-fiber is a <a href="https://reactjs.org/docs/codebase-overview.html#renderers">React renderer</a> for threejs.
 
+Build your scene declaratively with re-usable, self-contained components that react to state, are readily interactive and can participate in React's ecosystem.
+
 ```bash
 npm install three @react-three/fiber
 ```
 
-### Why?
-
-Build your scene declaratively with re-usable, self-contained components that react to state, are readily interactive and can tap into React's ecosystem.
-
 #### Does it have limitations?
 
-None. Everything that works in threejs will work here without exception.
+None. Everything that works in Threejs will work here without exception.
 
-#### Can it keep up with frequent updates to threejs?
+#### Is it slower than plain Threejs?
 
-Yes, because it merely expresses threejs in JSX: `<mesh />` becomes `new THREE.Mesh()`, and that happens dynamically. There is no hard dependency on a particular threejs version, it does not wrap or duplicate a single threejs class.
+No. There is no overhead. Components render outside of React. It outperforms Threejs in scale due to Reacts scheduling abilities.
 
-#### Is it slower than plain threejs?
+#### Can it keep up with frequent feature updates to Threejs?
 
-There is no additional overhead. Components participate in the renderloop outside of React.
+Yes. It merely expresses Threejs in JSX: `<mesh />` becomes `new THREE.Mesh()`, and that happens dynamically. If a new Threejs version adds, removes or changes features, it will be available to you instantly without depending on updates to this library.
 
 ### What does it look like?
 
 <table>
-  <tr>
-    <td>Let's make a re-usable component that has its own state, reacts to user-input and participates in the render-loop. (<a href="https://codesandbox.io/s/rrppl0y8l4?file=/src/App.js">live demo</a>).</td>
-    <td>
-      <a href="https://codesandbox.io/s/rrppl0y8l4">
-        <img src="https://i.imgur.com/sS4ArrZ.gif" /></td>
-      </a>
-  </tr>
+  <tbody>
+    <tr>
+      <td>Let's make a re-usable component that has its own state, reacts to user-input and participates in the render-loop. (<a href="https://codesandbox.io/s/rrppl0y8l4?file=/src/App.js">live demo</a>).</td>
+      <td>
+        <a href="https://codesandbox.io/s/rrppl0y8l4">
+          <img src="https://i.imgur.com/sS4ArrZ.gif" />
+        </a>
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-#### Imports first
-
 ```jsx
+import { createRoot } from 'react-dom/client'
 import React, { useRef, useState } from 'react'
-import ReactDOM from 'react-dom'
 import { Canvas, useFrame } from '@react-three/fiber'
-```
 
-#### Define a component
-
-```jsx
 function Box(props) {
-  // This reference will give us direct access to the mesh
-  const mesh = useRef()
-  // Set up state for the hovered and active state
-  const [hovered, setHover] = useState(false)
-  const [active, setActive] = useState(false)
-  // Rotate mesh every frame, this is outside of React without overhead
-  useFrame(() => (mesh.current.rotation.x += 0.01))
-
+  // This reference gives us direct access to the THREE.Mesh object
+  const ref = useRef()
+  // Hold state for hovered and clicked events
+  const [hovered, hover] = useState(false)
+  const [clicked, click] = useState(false)
+  // Subscribe this component to the render-loop, rotate the mesh every frame
+  useFrame((state, delta) => (ref.current.rotation.x += 0.01))
+  // Return the view, these are regular Threejs elements expressed in JSX
   return (
     <mesh
       {...props}
-      ref={mesh}
-      scale={active ? 1.5 : 1}
-      onClick={(event) => setActive(!active)}
-      onPointerOver={(event) => setHover(true)}
-      onPointerOut={(event) => setHover(false)}>
-      <boxGeometry args={[1, 2, 3]} />
+      ref={ref}
+      scale={clicked ? 1.5 : 1}
+      onClick={(event) => click(!clicked)}
+      onPointerOver={(event) => hover(true)}
+      onPointerOut={(event) => hover(false)}>
+      <boxGeometry args={[1, 1, 1]} />
       <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
     </mesh>
   )
 }
+
+createRoot(document.getElementById('root')).render(
+  <Canvas>
+    <ambientLight />
+    <pointLight position={[10, 10, 10]} />
+    <Box position={[-1.2, 0, 0]} />
+    <Box position={[1.2, 0, 0]} />
+  </Canvas>,
+)
 ```
 
-#### Compose the scene
+<details>
+  <summary>Show TypeScript example</summary>
+  
+```bash
+npm install @types/three
+```
 
-Either use `Canvas`, which you can think of as a portal to threejs inside your regular dom graph. Everything within it is a [native threejs element](https://threejs.org/docs). If you want to mix Webgl and Html (react-dom) this is what you should use.
+```tsx
+import * as THREE from 'three'
+import { createRoot } from 'react-dom/client'
+import React, { useRef, useState } from 'react'
+import { Canvas, useFrame, ThreeElements } from '@react-three/fiber'
 
-```jsx
-ReactDOM.render(
+function Box(props: ThreeElements['mesh']) {
+  const ref = useRef<THREE.Mesh>(null!)
+  const [hovered, hover] = useState(false)
+  const [clicked, click] = useState(false)
+  useFrame((state, delta) => (ref.current.rotation.x += 0.01))
+  return (
+    <mesh
+      {...props}
+      ref={ref}
+      scale={clicked ? 1.5 : 1}
+      onClick={(event) => click(!clicked)}
+      onPointerOver={(event) => hover(true)}
+      onPointerOut={(event) => hover(false)}>
+      <boxGeometry args={[1, 1, 1]} />
+      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
+    </mesh>
+  )
+}
+
+createRoot(document.getElementById('root') as HTMLElement).render(
   <Canvas>
     <ambientLight />
     <pointLight position={[10, 10, 10]} />
     <Box position={[-1.2, 0, 0]} />
     <Box position={[1.2, 0, 0]} />
   </Canvas>,
-  document.getElementById('root'),
 )
 ```
 
-Or use react-three-fibers own `render` function, which is a little more low-level but could save you the extra cost of carrying react-dom. It renders into a dom `canvas` element. Use this for Webgl-only apps.
+Live demo: https://codesandbox.io/s/icy-tree-brnsm?file=/src/App.tsx
 
-```jsx
-import { render } from '@react-three/fiber'
+</details>
+
+<details>
+  <summary>Show React Native example</summary>
+
+This example relies on react 18 and uses `expo-cli`, but you can create a bare project with their template or with the `react-native` CLI.
 
-render(<Scene />, document.querySelector('canvas'))
+```bash
+# Install expo-cli, this will create our app
+npm install expo-cli -g
+# Create app and cd into it
+expo init my-app
+cd my-app
+# Install dependencies
+npm install three @react-three/fiber@beta react@rc
+# Start
+expo start
 ```
 
-<details>
-  <summary>Show TypeScript example</summary>
+Some configuration may be required to tell the Metro bundler about your assets if you use `useLoader` or Drei abstractions like `useGLTF` and `useTexture`:
 
-```tsx
-import { Canvas, MeshProps, useFrame } from '@react-three/fiber'
+```js
+// metro.config.js
+module.exports = {
+  resolver: {
+    sourceExts: ['js', 'jsx', 'json', 'ts', 'tsx', 'cjs'],
+    assetExts: ['glb', 'png', 'jpg'],
+  },
+}
+```
 
-const Box: React.FC<MeshProps> = (props) => {
-  // This reference will give us direct access to the mesh
-  const mesh = useRef<THREE.Mesh>(null!)
-  // Set up state for the hovered and active state
+```tsx
+import React, { useRef, useState } from 'react'
+import { Canvas, useFrame } from '@react-three/fiber/native'
+function Box(props) {
+  const mesh = useRef(null)
   const [hovered, setHover] = useState(false)
   const [active, setActive] = useState(false)
-  // Rotate mesh every frame, this is outside of React without overhead
-  useFrame(() => (mesh.current.rotation.x += 0.01))
-
+  useFrame((state, delta) => (mesh.current.rotation.x += 0.01))
   return (
     <mesh
       {...props}
@@ -124,32 +172,32 @@ const Box: React.FC<MeshProps> = (props) => {
       onClick={(event) => setActive(!active)}
       onPointerOver={(event) => setHover(true)}
       onPointerOut={(event) => setHover(false)}>
-      <boxGeometry args={[1, 2, 3]} />
+      <boxGeometry args={[1, 1, 1]} />
       <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
     </mesh>
   )
 }
-
-ReactDOM.render(
-  <Canvas>
-    <ambientLight />
-    <pointLight position={[10, 10, 10]} />
-    <Box position={[-1.2, 0, 0]} />
-    <Box position={[1.2, 0, 0]} />
-  </Canvas>,
-  document.getElementById('root'),
-)
+export default function App() {
+  return (
+    <Canvas>
+      <ambientLight />
+      <pointLight position={[10, 10, 10]} />
+      <Box position={[-1.2, 0, 0]} />
+      <Box position={[1.2, 0, 0]} />
+    </Canvas>
+  )
+}
 ```
 
 </details>
 
 ---
 
-# Documentation
+# Documentation, tutorials, examples
+
+Visit [docs.pmnd.rs](https://docs.pmnd.rs/react-three-fiber)
 
-- [api.md](/markdown/api.md)
-- [pitfalls.md](/markdown/pitfalls.md)
-- [testing.md](/packages/test-renderer)
+<a href="https://docs.pmnd.rs/react-three-fiber"><img src="/docs/preview.jpg"></a>
 
 # Fundamentals
 
@@ -158,13 +206,14 @@ You need to be versed in both React and Threejs before rushing into this. If you
 1. Make sure you have a [basic grasp of Threejs](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene). Keep that site open.
 2. When you know what a scene is, a camera, mesh, geometry, material, fork the [demo above](https://github.com/pmndrs/react-three-fiber#what-does-it-look-like).
 3. [Look up](https://threejs.org/docs/index.html#api/en/objects/Mesh) the JSX elements that you see (mesh, ambientLight, etc), _all_ threejs exports are native to three-fiber.
-4. Try changing some values, scroll though our [Api](/markdown/api.md) to see what the various settings and hooks do.
+4. Try changing some values, scroll through our [API](https://docs.pmnd.rs/react-three-fiber/API) to see what the various settings and hooks do.
 
 Some reading material:
 
 - [Threejs-docs](https://threejs.org/docs)
 - [Threejs-examples](https://threejs.org/examples)
 - [Threejs-fundamentals](https://threejs.org/manual/#en/fundamentals)
+- [three.js-journey](https://threejs-journey.com)
 - [Discover Threejs](https://discoverthreejs.com)
 - [Do's and don'ts](https://discoverthreejs.com/tips-and-tricks) for performance and best practices
 - [react-three-fiber alligator.io tutorial](https://alligator.io/react/react-with-threejs) by [@dghez\_](https://twitter.com/dghez_)
@@ -177,9 +226,11 @@ Some reading material:
 - [`@react-three/flex`](https://github.com/pmndrs/react-three-flex) &ndash; flexbox for react-three-fiber
 - [`@react-three/xr`](https://github.com/pmndrs/react-xr) &ndash; VR/AR controllers and events
 - [`@react-three/cannon`](https://github.com/pmndrs/use-cannon) &ndash; physics based hooks
+- [`@react-three/a11y`](https://github.com/pmndrs/react-three-a11y) &ndash; real a11y for your scene
 - [`zustand`](https://github.com/pmndrs/zustand) &ndash; state management
 - [`react-spring`](https://github.com/pmndrs/react-spring) &ndash; a spring-physics-based animation library
 - [`react-use-gesture`](https://github.com/pmndrs/react-use-gesture) &ndash; mouse/touch gestures
+- [`leva`](https://github.com/pmndrs/leva) &ndash; create GUI controls in seconds
 
 # How to contribute