🇨🇭 A React renderer for Three.js (web and react-native)



Version Downloads Twitter Discord Open Collective ETH BTC

react-three-fiber is a React renderer for threejs on the web and react-native.

npm install three react-three-fiber

These demos are real, you can click them! They contain the full code, too.


Building dynamic scene graphs declaratively with re-usable components makes dealing with threejs easier and brings order and sanity to your codebase. These components react to state changes, are interactive out of the box and can tap into React's infinite ecosystem.

Does it have limitations?

None. Everything that works in threejs will work here. In contrast to "bindings" where a library ships/maintains dozens of wrapper components, it just renders JSX to threejs dynamically: <mesh /> simply is another expression for new THREE.Mesh(). It does not know or target a specific threejs version nor does it need updates for modified, added or removed upstream features.

Is it slower than raw threejs?

No. Rendering performance is up to threejs and the GPU. Components participate in the renderloop outside of React, without any additional overhead. React is otherwise very efficient in building and managing component-trees, it could potentially outperform manual/imperative apps at scale.

What does it look like?

Let's make a re-usable component that has its own state, reacts to user-input and participates in the render-loop. (live demo).
import ReactDOM from 'react-dom'
import React, { useRef, useState } from 'react'
import { Canvas, useFrame } from 'react-three-fiber'

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 = mesh.current.rotation.y += 0.01

  return (
      scale={active ? [1.5, 1.5, 1.5] : [1, 1, 1]}
      onClick={(event) => setActive(!active)}
      onPointerOver={(event) => setHover(true)}
      onPointerOut={(event) => setHover(false)}>
      <boxBufferGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />

    <ambientLight />
    <pointLight position={[10, 10, 10]} />
    <Box position={[-1.2, 0, 0]} />
    <Box position={[1.2, 0, 0]} />
Show TypeScript example
import ReactDOM from 'react-dom'
import React, { useRef, useState } from 'react'
import { Canvas, MeshProps, useFrame } from 'react-three-fiber'
import type { Mesh } from 'three'

const Box: React.FC<MeshProps> = (props) => {
  // This reference will give us direct access to the mesh
  const mesh = useRef<Mesh>()

  // 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(() => {
    if (mesh.current) mesh.current.rotation.x = mesh.current.rotation.y += 0.01

  return (
      scale={active ? [1.5, 1.5, 1.5] : [1, 1, 1]}
      onClick={(event) => setActive(!active)}
      onPointerOver={(event) => setHover(true)}
      onPointerOut={(event) => setHover(false)}>
      <boxBufferGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />

    <ambientLight />
    <pointLight position={[10, 10, 10]} />
    <Box position={[-1.2, 0, 0]} />
    <Box position={[1.2, 0, 0]} />



You need to be versed in both React and Threejs before rushing into this. If you are unsure about React consult the official React docs, especially the section about hooks. As for Threejs, make sure you at least glance over the following links:

  1. Make sure you have a basic grasp of Threejs. Keep that site open.
  2. When you know what a scene is, a camera, mesh, geometry, material, fork the demo above.
  3. Look up 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 to see what the various settings and hooks do.

Some reading material:


How to contribute

If you like this project, please consider helping out. All contributions are welcome as well as donations to Opencollective, or in crypto BTC: 36fuguTPxGCNnYZSRdgdh6Ea94brCAjMbH, ETH: 0x6E3f79Ea1d0dcedeb33D3fC6c34d2B1f156F2682.

  • TypeScript


    Any interest in supporting TypeScript? Initially probably only the inner workings (react-reconciler provides types) and then finding a way to generate types for the THREE bindings.

    opened by ksjogo 53
  • help wanted for creating a website

    help wanted for creating a website

    👋anyone wants to help make a good webpage for three-fiber? i am trying to get something going but i have no idea what i'm doing, layout and typography is out of my league completely.

    this is what i've got so far from playing around:


    live demo here: https://pjcc1.csb.app/ (editor: https://codesandbox.io/s/three-fiber-useloader-pjcc1)

    as always, i would be happy to credit you plus link on the site.

    as for the requirements ...

    it doesn't have to look like the above at all.

    it could be really simple or really fancy.

    it could have docs or none at all.

    it could even be a small interactive tutorial, like this one: https://use-key-state.mihaicernusca.com

    basically, if you have ideas, make a proposal! 😊

    help wanted 
    opened by drcmda 52
  • onPointerOut doesn't fire when moving to an abutting object

    onPointerOut doesn't fire when moving to an abutting object

    I made a sandbox to demonstrate the differences between R3F pointer events and native DOM. (The ts-ignore in the sandbox are there because onPointerEnter and onPointerLeave seem to be missing from the EventHandlers type in types.ts: I can make a PR to add that if that's helpful.)

    To see the DOM event behaviour, move the mouse onto the A at the top, then from A directly to B (there's no gap between them). The move from A to B gives these events:

    DOM out A 
    DOM child leave A 
    DOM child enter B 
    DOM over B 

    You can see the equivalent situation in R3F below. Move your pointer onto the red cube, then directly onto the blue cube. Again, there's no gap between them. When you move from red to blue, you get these events:

    R3F child enter bravo 
    R3F child leave alpha

    Note that the leave and enter are the opposite way around compared to the native events; more on this later. More importantly, note the absence of the "out" event. This comes later, when you move out from the blue cube onto empty space:

    R3F out alpha 
    R3F leave alpha 
    R3F child leave bravo

    The top-level leave event is on the wrong element: it should be bravo, not alpha. And the out event only comes now. Bravo (the blue cube) never got an over or out event.

    Looking at canvas.tsx, the order is clearly because handlePointerCancel only happens at the end of the event processing, and I think the lack of events on bravo might be because this line is comparing the eventObject instead of the object. Using the eventObject would be correct for enter/leave, where you're not supposed to get events for boundaries inside the element that has the event handler, but you are supposed to get them for over/out, so I think it needs to compare object instead.

    It might be worth noting that I only tried using onPointerOver/Out because of the reverse order of onPointerEnter/Leave. In my application, I need to handle these events by setting a state that contains the currently hovered object, or empty if no object is hovered. First I tried to use an onPointerEnter/Leave handler on the child objects, but then I got a bug with overlapping objects, because the late onPointerLeave would clear my hovered object state after it was set to the new object. I checked the W3C specs for pointer and mouse events and couldn't find anything saying which order they should be in, so I don't know if the behaviour is wrong (from the POV of not matching the specified behaviour of native events), but it's definitely inconvenient this way around. I tried using onPointerOver/Out on my root node instead as a workaround, but then hit this bug.

    opened by dangrabcad 37
  • Multiple canvases display the same thing

    Multiple canvases display the same thing

    Hey again, so I'm still trying to replicate this example. From their code, a canvas is created for each couple of images.

    Here is my attempt, also based on the sandbox you provided me in issue #23 (thanks again!) https://codesandbox.io/s/w5902o607

    I'm not sure if it's updating to v1.3.7 that created this but now all canvases are showing the same image, and behave like one. I had it running properly at one point (under v1.3.6) but then I was running into THREE.WebGLRenderer: Context Lost issues.

    Maybe this is not the right place to ask, but it really felt related to the version bump from v1.3.6 to v1.3.7

    opened by dbismut 35
  • 🔮 v4 collecting ideas (suggestions welcome)

    🔮 v4 collecting ideas (suggestions welcome)

    • [ ] switching on concurrent mode in the reconciler. this will enable time slicing and faster rendering overall. react will be able to schedule and defer updates if it detects that a 60fps framerate is threatened somehow.

    • [ ] optional import components https://github.com/react-spring/react-three-fiber/pull/233 this is more interesting for typescript users.

    import { Mesh } from 'react-three-fiber/components'
    <Mesh />
    • [ ] extras/helpers?

    Things that usually need some boilerplate could be abstracted and collected. For instance controls, level-of-detail, etc

    import { OrbitControls } from 'react-three-fiber/extras'
    <OrbitControls enableDamping />
    • [ ] useCenter?
    import { useCenter } from 'react-three-fiber/extras'
    function useCenter(ref)
      const [center, setCenter] = useState([0, 0, 0])
      const ref = useRef()
      useEffect(() => {
        const box = new Box3().setFromObject(ref.current)
        const sphere = new Sphere()
        setCenter([-sphere.center.x, -sphere.center.y, -sphere.center.z])
      }, [])
      return [ref, center]
    • [ ] something to help with simple animations other than react-spring/three?


    • [ ] new object={...} ?

    currently primitive can project an object into the scene that is already there. if you have a class prototype outside of the THREE namespace you must use extent before you can use it in jsx. what about:

    <new object={Xyz} args={[1,2,3]} {...props} />
    // const temp = new Xyz(1,2,3)
    // applyProps(temp, props)
    opened by drcmda 30
  • ✍️ Roadmap for 2.x (suggestions welcome)

    ✍️ Roadmap for 2.x (suggestions welcome)

    • [x] Stable interaction layer so that this lib will be able to interface with react-with-gesture
      • Raytracer order problem: https://github.com/mrdoob/three.js/issues/16031
    • [x] Proper event bubbling, e.stopPropagation()
    • [x] Expose renderloop, so that libs like react-spring do not have to run their own (bad for perf)
    • [x] Allow frameloop invalidation so that it only renders when there's a need for it
    • [x] Stable camera treatment, default-camera rigs, multi-scene rendering, hud, etc.
      • Scene-cam threejs issue: https://github.com/mrdoob/three.js/issues/15929
      • Working impl draft: https://github.com/drcmda/react-three-fiber#heads-up-display-rendering-multiple-scenes
    • [x] Better non-object3d primitive handling
      • Ref problem: https://github.com/facebook/react/pull/15021
      • name="xyz" -> attach="xyz"
      • attachArray="passes" -> allowing objects to fill parent arrays
    • [x] Figure out a definitive set for hooks, currently useThree, useRender
    • [ ] Make auto-canvas-measurement optional
    • [ ] Tests, with help from @bl4ckm0r3
    • [ ] Typescript, with help from @ksjogo
    opened by drcmda 29
  • Reconciler import fix (revisited)

    Reconciler import fix (revisited)

    This PR reverts the changes from #827 and adds typechecking and linting to the test script (somewhat unrelated to the revert) to ensure that these pass before things get merged to master.

    The changes from #823 to disable esModuleInterop were sensible, as when libraries utilize this any consumer can end up with either:

    1. Errors because they are not using this setting and so the modules will not be resolved
    2. Errors due to referencing a different version of imported libraries than this library

    #827 incorrectly imported the reconciler as a default. It does not have a default export. This can be seen in the tests that are now failing on master here.

      TypeError: react_reconciler_1.default is not a function
          482 | //    NoTimeout
          483 | //  >
        > 484 | const Renderer = Reconciler({
              |                            ^
          485 |   now,
          486 |   createInstance,
          487 |   removeChild,
          at Object.<anonymous> (src/renderer.tsx:484:28)
          at Object.<anonymous> (src/index.ts:1:1)
    opened by JakeSidSmith 28
  • Can't install react-three-fiber for react-native

    Can't install react-three-fiber for react-native

    I've try npm install three @react-three/fiber but my code cant run because there's something wrong with the module and stuff, here's the problem. I've searched for the solution but can't find anything that actually works. image

    Here are my dependencies "dependencies": { "@react-three/fiber": "^7.0.4", "expo": "~42.0.1", "expo-status-bar": "~1.0.4", "react": "16.13.1", "react-dom": "16.13.1", "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz", "react-native-web": "~0.13.12", "three": "^0.130.1" },

    opened by TeamBaconn 26
  • feat(web): accept function as gl that returns a renderer

    feat(web): accept function as gl that returns a renderer

    This allows passing in another renderer without having to create a canvas element yourself:

      gl={(canvas) => new WebGPURenderer({ canvas })}

    I do need some advice on how to JavaScript -> TypeScript this bit of code :)

    opened by Tirzono 25
  • Example for integrating VR Controllers raycasting.

    Example for integrating VR Controllers raycasting.

    The code for getting the THREE.js VR controllers working within a react-three-fiber vr experiences seems straightforward, but getting the controllers to trigger click events within the react-three-fiber framework( raycasting ) does not seem obvious.

    It could be helpful to have another example that shows how this can be achieved ( if it is actually currently possible ). It may be another ticket could be needed to enable VR controller raycasting in a proper fashion.

    This codesandbox illustrates an attempt to modify the raycaster. ( NOTE the codesandbox does not work due to XR permissions, but the code is there )


    You can see in the src/components/ControllerRayCaster.tsx component an attempt to modify the raycaster from state using the "useFrame" hook. Here it uses a common pattern from the THREE.js VR demos. Below is a link to an example that updates the origin and direction of a ray used for raycasting:


    opened by gitsome 24
  • feat(typescript): Basic TypeScript support

    feat(typescript): Basic TypeScript support


    Adds TypeScript support to react-three-fiber by adding a .tsconfig.json, and changing the file extensions to .ts / .tsx. This gives us some decent inferred type-checking out of the box with tsc.

    Also add a new npm script called typecheck, which calls tsc --noEmit --jsx react src/*, to perform static type-checking on the fly, which may be useful if something like CircleCI is setup for continuous integration.

    This is also potentially useful because Babel will compile the files, regardless of if it passes TypeScript type checks or not. 🤷‍♂️

    Example output for yarn run typecheck is as follows:

    src/canvas.tsx:31:19 - error TS2554: Expected 5 arguments, but got 3.
    31       if (camera) applyProps(cam, camera, {})

    @drcmda would love to get your thoughts on the approach, and if you have some ideas on a public types/ interface you would want end-users to use.


    • [ ] Fix existing TypeScript errors from inferred types.
    • [x] Create types/ folder, providing public types for react-three-fiber to be used by end-users.
    opened by setsun 23
  • Can't load some glb file in ReactNaitve project

    Can't load some glb file in ReactNaitve project

    • Description I created a RN project by Expo and integrated react-three-fiber. Everything works well, i can load glb files provided from office examples and here. But a error was thrown when i download a glb file from Window's 3d resources libray and try to load it.
    • Development Environment Windows10 & Vs Code
    • My Mobie Phone Xiaomi6 & Android9
    • Code My Project
    • Screenshots
      • Work normally 20230101114905
      • Work broken
    • App.js
    import { Canvas, useFrame } from '@react-three/fiber/native'
    import React, { useRef, useState, Suspense } from 'react'
    import { HStack, Center, NativeBaseProvider } from 'native-base'
    import { useGLTF, Environment } from '@react-three/drei/native'
    import { Text, StyleSheet } from 'react-native'
    import parrotModel from './assets/Parrot.glb'
    import iphoneModelPath from './assets/iphone.glb'
    import storkeModelPath from './assets/Stork.glb'
    function Model({ url, ...rest }) {
      const { scene } = useGLTF(url)
      useFrame(() => (scene.rotation.y += 0.01))
      return <primitive {...rest} object={scene} />
    function MBox(props) {
      const mesh = useRef(null)
      const [hovered, setHover] = useState(false)
      const [active, setActive] = useState(false)
      useFrame((state, delta) => (mesh.current.rotation.x += 0.01))
      return (
          scale={active ? 1.5 : 1}
          onClick={(event) => setActive(!active)}
          onPointerOver={(event) => setHover(true)}
          onPointerOut={(event) => setHover(false)}
          <boxGeometry args={[1, 1, 1]} />
          <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
    function ModelScene({ url }) {
      return (
          gl={{ physicallyCorrectLights: true }}
          camera={{ position: [-6, 0, 16], fov: 36 }}
          <color attach="background" args={[0xe2f4df]} />
          <ambientLight />
          <directionalLight intensity={1.1} position={[0.5, 0, 0.866]} />
          <directionalLight intensity={0.8} position={[-6, 2, 2]} />
            <Environment preset="park" />
            <Model url={url} />
    export default function App() {
      return (
          <HStack space={3} justifyContent="center">
            <Canvas style={styles.squere}>
              <color attach="background" args={[0xfafe77]} />
              <ambientLight />
              <pointLight position={[10, 10, 10]} />
              <MBox position={[0, 0, 1]} />
            <ModelScene url={parrotModel} />
            <ModelScene url={iphoneModelPath} />
            <ModelScene url={storkeModelPath} />
              <Text>Native Base</Text>
          <Text style={styles.text}>React Native 3D Experiment</Text>
    const styles = StyleSheet.create({
      text: {
        marginLeft: 5,
        color: 'green',
      squere: {
        marginLeft: 5,
      rect: {
        marginRight: 7,
    • My Thoughts I thought that maybe the glb file should be processed before loaded, but i couldn't find any solution, so someone can provide help,thanks.
    opened by Okay6 0
  • v9: Proposal to revamp the frameloop

    v9: Proposal to revamp the frameloop


    Working on the editor, we came across a need to suspend all R3F updates, but this was very hard to do in v8 and required manually manipulating internal states. On top of that, the THREE.Clock is deeply flawed and cannot provide deterministic time or even pause, not to mention the known issues of only being able to call getElapsedTime() once per rAF. As well, updates in the loop are leaky. Some updates will fire even if render does not, and it isn't clear which and why.



    To start, we will use Mugen's Timer, ported to three-stdlib, instead of THREE.Clock. This changes some of the APIs slightly but allows for many benefits such as time scaling, proper get functions, deterministic time and even pausing the timer when tabbed away.

    Unity loops and effects

    R3F effects currently fire every tick even if the frameloop is set to never. Effects should be deprecated and automatically dumped into the corresponding stages, Early, Late and After. The frameloop settings will be changed to top level instead of per root. This will avoid really confusing situations where different roots have different render settings, but the effects still fire on all of them every update.

    Frameloop never revamp

    Frameloop never will be changed to fit more common workflows. Currently it only skips render() calls with advance() taking a timestamp to produce a delta. Instead, it will now pause the entire loop so no logic runs at all (even effects) unless advance() is called. advance() will now take a delta and advance the app by that delta each call. This will allow applications like the editor to manipulate the loop for debugging purposes as well as allow for animation unit tests.

    Update Stages to use Timer.

    Right now all Stages maintain their own time. Putting it in one place helps lockstep them. One change that would need to be made for this is either make it so that all FixedStages use the same fixed step -- like Unity -- or allow Timer to keep multiple fixed steps of time. I'm leaning toward the later since there are some useful cases for having multiple fixed steps, such as putting different systems on different update schedules.

    request for comments 
    opened by krispya 0
  • fix: guard against frameloop: never render calls

    fix: guard against frameloop: never render calls

    This adds a single guard to the render() call in loop(). This makes it so that if the frameloop changes from always to never, it does not fire off one last render() call without advance() which then has the rAF timestamp passed in, which is in milliseconds instead of seconds, and reports deltas at absurdly high values.

    opened by krispya 1
  • Property 'mesh' does not exist on type 'JSX.IntrinsicElements'.

    Property 'mesh' does not exist on type 'JSX.IntrinsicElements'.

    I followed your introduction page but got the error: Property 'mesh' does not exist on type 'JSX.IntrinsicElements'. my dependencies

    "@react-three/fiber": "^8.9.1"
    "three": "^0.148.0"
    "@types/three": "^0.146.0"

    I tried to downgrade the version of three and types/three but it still did not work my code:


    pls help me to fix this issue. thanks

    opened by haola1210 1
  • v9 type export coverage

    v9 type export coverage

    I started a branch to update Drei to use R3F v9. Attached is a log of all the type errors I got, which are mostly along the lines of prop types. I'd like to talk about the best way to handle this in v9, if there is already a strategy I am unaware of or if we should create one.


    request for comments Typescript 
    opened by krispya 10
  • Export of models/textures fetching utils

    Export of models/textures fetching utils

    Hi, first of all thank you for really great set of tools.

    In my project i use react three fiber and several other packages like drei, three-stdlib and other.

    I want to control assets loading process of my app not in react jsx tree (without using <Suspense />).

    I had to copy part of the source code that is not exported from @react-three/fiber package, namely function that loads GLTF by url string and returns GLTF & ObjectMap.

    Can you please add export of more low-level utilities?

    For example i want to use it like this:

    import { fetchGLTF } from `@react-three/fiber`;
    const model: GLTF & ObjectMap = await fetchGLTF('localhost:8080');

    My custom solution, if it will be useful to someone

    import { ObjectMap } from '@react-three/fiber';
    import { Object3D } from 'three';
    import { DRACOLoader, GLTFLoader } from 'three-stdlib';
    // @ts-ignore https://github.com/pmndrs/three-stdlib/issues/211
    import { MeshoptDecoder } from 'three-stdlib';
    type GltfWithGraph = GLTF & ObjectMap;
    export function fetchGLTF(src: string): Promise<GltfWithGraph> {
      const loader = new GLTFLoader();
      const dracoLoader = new DRACOLoader();
        typeof MeshoptDecoder === 'function' ? MeshoptDecoder() : MeshoptDecoder,
      return new Promise<GltfWithGraph>((done, fail) => {
          gltf => {
            done(Object.assign(gltf, buildGraph(gltf.scene)));
          error => {
            fail(Error(`Failed to load GLTF, ${String(error)}`));
    function buildGraph(object: Object3D): ObjectMap {
      const data: ObjectMap = { nodes: {}, materials: {} };
      if (object) {
        object.traverse((object: any) => {
          if (object.name) {
            data.nodes[object.name] = object;
          if (object.material && !data.materials[object.material.name]) {
            data.materials[object.material.name] = object.material;
      return data;
    opened by krutoo 0
  • v8.9.2(Dec 29, 2022)

    What's Changed

    • chore(docs): update objects.mdx by @yikayiyo in https://github.com/pmndrs/react-three-fiber/pull/2616
    • chore(docs): fix broken link to react-three-rapier by @nhemsley in https://github.com/pmndrs/react-three-fiber/pull/2627
    • chore(docs): very small typo (useFrame) by @benlazzero in https://github.com/pmndrs/react-three-fiber/pull/2651
    • fix(types): tighten allowed type for object prop on primitives by @Methuselah96 in https://github.com/pmndrs/react-three-fiber/pull/2654
    • fix: primitives are incorrectly swapped on key change in maps by @bodo22 in https://github.com/pmndrs/react-three-fiber/pull/2680

    New Contributors

    • @yikayiyo made their first contribution in https://github.com/pmndrs/react-three-fiber/pull/2616
    • @nhemsley made their first contribution in https://github.com/pmndrs/react-three-fiber/pull/2627
    • @benlazzero made their first contribution in https://github.com/pmndrs/react-three-fiber/pull/2651
    • @bodo22 made their first contribution in https://github.com/pmndrs/react-three-fiber/pull/2680

    Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v8.9.1...v8.9.2

    Source code(tar.gz)
    Source code(zip)
  • v8.9.1(Nov 2, 2022)

    What's Changed

    • fix(events): type spread event props by @CodyJasonBennett in https://github.com/pmndrs/react-three-fiber/pull/2608

    Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v8.9.0...v8.9.1

    Source code(tar.gz)
    Source code(zip)
  • v8.9.0(Oct 29, 2022)

    What's Changed

    • fix(loop): export flush methods and types by @CodyJasonBennett in https://github.com/pmndrs/react-three-fiber/pull/2580

    Re-release of #2481 from v8.7.0, it just didn't get exported.

    Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v8.8.11...v8.9.0

    Source code(tar.gz)
    Source code(zip)
  • v8.8.11(Oct 29, 2022)

    What's Changed

    • docs(links): Add Threejs Journey link to recommended documentation by @Ahlecss in https://github.com/pmndrs/react-three-fiber/pull/2592
    • fix: pointer events and pointer capture by @adventful in https://github.com/pmndrs/react-three-fiber/pull/2600
    • fix(events): sort by distance on undefined roots by @Inuniku in https://github.com/pmndrs/react-three-fiber/pull/2599
    • fix(useLoader): make better use of generics for extensions by @CodyJasonBennett in https://github.com/pmndrs/react-three-fiber/pull/2598

    New Contributors

    • @Ahlecss made their first contribution in https://github.com/pmndrs/react-three-fiber/pull/2592
    • @adventful made their first contribution in https://github.com/pmndrs/react-three-fiber/pull/2600

    Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v8.8.10...v8.8.11

    Source code(tar.gz)
    Source code(zip)
  • v8.8.10(Oct 11, 2022)

    What's Changed

    • fix: invalidate pierced props by @CodyJasonBennett in https://github.com/pmndrs/react-three-fiber/pull/2549

    Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v8.8.9...v8.8.10

    Source code(tar.gz)
    Source code(zip)
  • v8.8.9(Oct 4, 2022)

    What's Changed

    • fix(createPortal): use correct JSX type by @CodyJasonBennett in https://github.com/pmndrs/react-three-fiber/pull/2550

    Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v8.8.8...v8.8.9

    Source code(tar.gz)
    Source code(zip)
  • v8.8.8(Oct 3, 2022)

    What's Changed

    • fix: call onUpdate for attached children prop update by @CodyJasonBennett in https://github.com/pmndrs/react-three-fiber/pull/2548

    Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v8.8.7...v8.8.8

    Source code(tar.gz)
    Source code(zip)
  • v8.8.7(Sep 29, 2022)

    What's Changed

    • fix: prefer named functions, for loops in hot paths by @AlaricBaraou in https://github.com/pmndrs/react-three-fiber/pull/2541

    Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v8.8.6...v8.8.7

    Source code(tar.gz)
    Source code(zip)
  • v8.8.6(Sep 27, 2022)

    What's Changed

    • fix: gracefully wrap context in production by @CodyJasonBennett in https://github.com/pmndrs/react-three-fiber/pull/2534

    Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v8.8.5...v8.8.6

    Source code(tar.gz)
    Source code(zip)
  • v8.8.5(Sep 27, 2022)

    What's Changed

    • fix: upgrade deps to work-around CRA by @CodyJasonBennett in https://github.com/pmndrs/react-three-fiber/pull/2531

    Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v8.8.4...v8.8.5

    Source code(tar.gz)
    Source code(zip)
  • v8.8.4(Sep 26, 2022)

    What's Changed

    • chore: upgrade bridge to harden suspense behavior by @CodyJasonBennett in https://github.com/pmndrs/react-three-fiber/pull/2530

    Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v8.8.2...v8.8.4

    Source code(tar.gz)
    Source code(zip)
  • v8.8.3(Sep 25, 2022)

    What's Changed

    • fix: events should fall back to rootstate by @drcmda in c40f8e49606585b300936db389edbc8c295d1c2a

    Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v8.8.2...v8.8.3

    Source code(tar.gz)
    Source code(zip)
  • v8.8.2(Sep 22, 2022)

    What's Changed

    • chore(docs): update concurrency info on Pitfalls docs page by @PontusHorn in https://github.com/pmndrs/react-three-fiber/pull/2517
    • fix(Canvas): prevent remount on context update by @CodyJasonBennett in https://github.com/pmndrs/react-three-fiber/pull/2522

    New Contributors

    • @PontusHorn made their first contribution in https://github.com/pmndrs/react-three-fiber/pull/2517

    Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v8.8.1...v8.8.2

    Source code(tar.gz)
    Source code(zip)
  • v8.8.1(Sep 21, 2022)

    What's Changed

    • refactor: pull context bridge from its-fine by @CodyJasonBennett in https://github.com/pmndrs/react-three-fiber/pull/2512

    No changes in this release.

    Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v8.8.0...v8.8.1

    Source code(tar.gz)
    Source code(zip)
  • v8.8.0(Sep 21, 2022)

    What's Changed

    • feat(Canvas): bridge cross-container context by @CodyJasonBennett in https://github.com/pmndrs/react-three-fiber/pull/2509

    This release implements a context bridge within Canvas, enabling R3F children to consume context between renderers (e.g. react-dom or react-native), and removing the need for manually bridging context.

    import * as React from 'react'
    import * as ReactDOM from 'react-dom/client'
    import { Canvas } from '@react-three/fiber'
    const DOMContext = React.createContext()
    function Component() {
      // "Hello from react-dom"
      <DOMContext.Provider value="Hello from react-dom">
          <Component />

    Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v8.7.4...v8.8.0

    Source code(tar.gz)
    Source code(zip)
  • v8.7.4(Sep 15, 2022)

    What's Changed

    • fix: use self to get global context before window by @joewhatkins in https://github.com/pmndrs/react-three-fiber/pull/2493

    New Contributors

    • @joewhatkins made their first contribution in https://github.com/pmndrs/react-three-fiber/pull/2493

    Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v8.7.2...v8.7.4

    Source code(tar.gz)
    Source code(zip)
  • v8.7.3(Sep 13, 2022)

    What's Changed

    • fix: eventsource pointer events by @drcmda in f26cd95c2b2ac966d4f89a9299af38cd7ae078ca

    Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v8.7.2...v8.7.3

    Source code(tar.gz)
    Source code(zip)
  • v8.7.2(Sep 13, 2022)

    What's Changed

    • fix: events in portals carry the wrong raycaster, camera, etc by @drcmda in 24cb1cf276ee7cd00108a4f9dc365e91e0fe493a

    Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v8.7.1...v8.7.2

    Source code(tar.gz)
    Source code(zip)
  • v8.7.1(Sep 6, 2022)

    What's Changed

    • fix: allow canvas eventsource to be a ref by @drcmda in bcb8f000c23c3f25ce7929bb1ae30d8bae697aa3

    Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v8.7.0...v8.7.1

    Source code(tar.gz)
    Source code(zip)
  • v8.7.0(Sep 4, 2022)

    What's Changed

    • feat(hooks): useInstanceHandle by @CodyJasonBennett in https://github.com/pmndrs/react-three-fiber/pull/2484
    • feat(loop): flushGlobalEffects for manual loop manipulation by @CodyJasonBennett in https://github.com/pmndrs/react-three-fiber/pull/2481

    Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v8.6.2...v8.7.0

    Source code(tar.gz)
    Source code(zip)
  • v8.6.2(Sep 1, 2022)

    What's Changed

    • fix(types): @react-three/drei declaration files by @Methuselah96 in https://github.com/pmndrs/react-three-fiber/pull/2478

    Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v8.6.1...v8.6.2

    Source code(tar.gz)
    Source code(zip)
  • v8.6.1(Sep 1, 2022)

    What's Changed

    • chore(docs): fix typo, changed "id" to "i" by @Johnrobmiller in https://github.com/pmndrs/react-three-fiber/pull/2458
    • chore(docs): update RootState section by @CodyJasonBennett in https://github.com/pmndrs/react-three-fiber/pull/2473
    • fix(core): don't append to unmounted containers by @CodyJasonBennett in https://github.com/pmndrs/react-three-fiber/pull/2472

    New Contributors

    • @Johnrobmiller made their first contribution in https://github.com/pmndrs/react-three-fiber/pull/2458

    Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v8.6.0...v8.6.1

    Source code(tar.gz)
    Source code(zip)
  • v8.6.0(Aug 22, 2022)

    What's Changed

    • feat: eventsource and eventprefix on the canvas component by @drcmda in fbce5f9b963603604ef17578a77229e4cbaf62e6

    Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v8.5.1...v8.6.0

    Source code(tar.gz)
    Source code(zip)
  • v8.5.1(Aug 22, 2022)

    What's Changed

    • fix(core): null-check instance.children on reconstruct by @CodyJasonBennett in https://github.com/pmndrs/react-three-fiber/pull/2454

    Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v8.5.0...v8.5.1

    Source code(tar.gz)
    Source code(zip)
  • v8.5.0(Aug 21, 2022)

    What's Changed

    • docs: remove usage of *BufferGeometry by @CodyJasonBennett in https://github.com/pmndrs/react-three-fiber/pull/2442
    • docs: fix link for three js fundamentals by @michaelbayday in https://github.com/pmndrs/react-three-fiber/pull/2444
    • feat(core): check instanceof for auto-attach by @CodyJasonBennett in https://github.com/pmndrs/react-three-fiber/pull/2453
    • fix(core): handle primitive children on reconstruct by @CodyJasonBennett in https://github.com/pmndrs/react-three-fiber/pull/2452

    New Contributors

    • @michaelbayday made their first contribution in https://github.com/pmndrs/react-three-fiber/pull/2444

    Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v8.3.1...v8.5.0

    Source code(tar.gz)
    Source code(zip)
  • v8.3.1(Aug 8, 2022)

    What's Changed

    • fix(types): accept readonly arrays for vector props by @kmannislands in https://github.com/pmndrs/react-three-fiber/pull/2428

    Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v8.3.0...v8.3.1

    Source code(tar.gz)
    Source code(zip)
  • v8.3.0(Aug 4, 2022)

    What's Changed

    • feat: improve errors by @lukekugelman in https://github.com/pmndrs/react-three-fiber/pull/2394

    New Contributors

    • @lukekugelman made their first contribution in https://github.com/pmndrs/react-three-fiber/pull/2394

    Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v8.2.3...v8.3.0

    Source code(tar.gz)
    Source code(zip)
  • v8.2.3(Aug 4, 2022)

    What's Changed

    • chore(docs): replace IntrinsicElements with ThreeElements by @bart-krakowski in https://github.com/pmndrs/react-three-fiber/pull/2393
    • chore: check lint in ci by @kmannislands in https://github.com/pmndrs/react-three-fiber/pull/2420
    • fix: compute initial size createRoot by @kmannislands in https://github.com/pmndrs/react-three-fiber/pull/2406
    • fix(types): add manager to useLoader signature by @miker2049 in https://github.com/pmndrs/react-three-fiber/pull/2421

    New Contributors

    • @miker2049 made their first contribution in https://github.com/pmndrs/react-three-fiber/pull/2421

    Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v8.2.2...v8.2.3

    Source code(tar.gz)
    Source code(zip)
  • v8.2.2(Jul 26, 2022)

    What's Changed

    • chore(docs): fix typo by @alexrider94 in https://github.com/pmndrs/react-three-fiber/pull/2384
    • chore(docs): fix typo in useLoader example by @inokawa in https://github.com/pmndrs/react-three-fiber/pull/2385
    • chore(tests): tests typecheck by @bart-krakowski in https://github.com/pmndrs/react-three-fiber/pull/2375
    • fix(renderer): warn on text instance, null check on instance create by @CodyJasonBennett in https://github.com/pmndrs/react-three-fiber/pull/2395

    New Contributors

    • @alexrider94 made their first contribution in https://github.com/pmndrs/react-three-fiber/pull/2384

    Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v8.2.1...v8.2.2

    Source code(tar.gz)
    Source code(zip)
  • v8.2.1(Jul 22, 2022)

    What's Changed

    • fix: use useLayoutEffect in native by @CodyJasonBennett in https://github.com/pmndrs/react-three-fiber/pull/2376

    Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v8.2.0...v8.2.1

    Source code(tar.gz)
    Source code(zip)
Osd-react-renderer - A custom React renderer for OpenSeadragon

osd-react-renderer A custom React renderer for OpenSeadragon viewer, built using

Lunit Inc. 4 Dec 5, 2022
An experimental, JSX-compatible renderer for the Web Audio API

Wax An experimental, JSX-compatible renderer for the Web Audio API. I wrote Wax for my Manchester Web Meetup talk, Manipulating the Web Audio API with

James Wright 176 Sep 16, 2022
React JSX Renderer is a React Component for rendering JSX to React nodes.

React JSX Renderer A React Component for Rendering JSX. Description React JSX Renderer is a React Component for rendering JSX to React nodes.

Sho Kusano 43 Nov 28, 2022
[ Unmaintained due to raphamorim/react-ape ] React Renderer for low memory applications

React-TV · react-tv: React Renderer for low memory applications. react-tv-cli: React Packager for TVs. Currently under development. import React from

Raphael Amorim 2k Jan 6, 2023
⚛️ A React renderer for Figma

React Figma A React renderer for Figma. Use React components as a source for your designs. ?? Compatible with react-native, react-sketchapp, react-pri

React Figma 2.2k Jan 5, 2023
⃝ A react null renderer

Nothing to see here ... Quite so. This package allows you to bring Reacts high-level component abstraction to Node, or wherever you need it. Why not m

Poimandres 653 Dec 23, 2022
A React renderer for Hardware.

React Hardware React Hardware enables you to build firmata-based hardware applications using a consistent developer experience based on JavaScript and

Dustan Kasten 794 Dec 26, 2022
A react renderer for browser's dev console

Konsul is an abstraction of the browser's console that comes with a React renderer. It offers text styling, images, style inheritance, buttons with cl

Mohamad Mohebifar 614 Dec 13, 2022
React custom renderer for Appcelerator® Titanium™ SDK

⚠️ Maintainer wanted! Create an issue if you want to maintain it! react-titanium A React custom renderer for Appcelerator® Titanium™ SDK. This rendere

Pier Paolo Ramon 107 Nov 21, 2022
React renderer for NativeScript

React NativeScript is A React renderer for NativeScript, allowing you to write a NativeScript app using the familiar React style. I'm always hanging o

Jamie Birch 266 Dec 17, 2022
A react renderer for blessed.

react-blessed A React custom renderer for the blessed library. This renderer should currently be considered as experimental, is subject to change and

Guillaume Plique 4.3k Jan 1, 2023
a react renderer for the command line

This repository is now archived This project was originally created as an alternative to the Ink library, as a separate renderer for a real React comp

Mike Grip 46 Jul 15, 2022
🦍• [Work in Progress] React Renderer to build UI interfaces using canvas/WebGL

React Ape React Ape is a react renderer to build UI interfaces using canvas/WebGL. React Ape was built to be an optional React-TV renderer. It's mainl

Raphael Amorim 1.5k Dec 18, 2022
📟 A React Renderer for SSD1306 OLED chip on Raspberry Pi.

React SSD1306 A React Renderer for SSD1306 OLED chip on Raspberry Pi For those who doesn't have the device, a canvas-based web emulator is also includ

Yifeng Wang 341 Jan 3, 2023
React renderer with X11 as a target

react-x11 React custom rendering where side effects are communication with X11 server. The goal is to create a simple library where you would apply yo

Andrey Sidorov 231 Nov 12, 2022
A custom Slack renderer for React! 3

react-slack-renderer Render Slack messages in a cool (React) way. const message = SlackRenderer.render( <SlackMessage> <SlackText> Heyo

Andrey 31 Aug 11, 2022
React renderer for building user interfaces in Unity UI

React Unity React Unity is a way to build interactive UI in Unity3D using React. It can be used together with packages like Typescript, redux, i18next

React Unity 493 Dec 30, 2022
🦴 A barebones react renderer for ogl.

react-ogl Declaratively create scenes with re-usable OGL components that have their own state and effects and can tap into React's infinite ecosystem.

Poimandres 116 Dec 1, 2022
React Fiber Reconciler Renderer for Regl WebGL

react-regl This library enables Regl shader WebGL draw commands to be rendered directly as React components. Demos View demos in the Storybook There i

kev zettler 191 Dec 20, 2022