🤳 VR/AR with react-three-fiber

Overview

@react-three/xr

Version Downloads Discord Shield

React components and hooks for creating VR/AR applications with @react-three/fiber

npm install @react-three/xr

Examples

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

Getting started

The following adds a button to start your session and controllers inside an XR manager to prepare your scene for WebXR rendering and interaction.

import { VRButton, ARButton, XR, Controllers, Hands } from '@react-three/xr'
import { Canvas } from '@react-three/fiber'

function App() {
  return (
    <>
      <VRButton />
      <Canvas>
        <XR>
          <Controllers />
          <Hands />
          <mesh>
            <boxGeometry />
            <meshBasicMaterial color="blue" />
          </mesh>
        </XR>
      </Canvas>
    </>
  )
}

XRButton

<XRButton /> is an HTML <button /> that can be used to init and display info about your WebXR session. This is aliased by ARButton and VRButton with sensible session defaults.

<XRButton
  /* The type of `XRSession` to create */
  mode={'AR' | 'VR' | 'inline'}
  /**
   * `XRSession` configuration options
   * @see https://immersive-web.github.io/webxr/#feature-dependencies
   */
  sessionInit={{ optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking', 'layers'] }}
  /** Whether this button should only enter an `XRSession`. Default is `false` */
  enterOnly={false}
  /** Whether this button should only exit an `XRSession`. Default is `false` */
  exitOnly={false}
>
  {/* Can accept regular DOM children and has an optional callback with the XR button status (unsupported, exited, entered) */}
  {(status) => `WebXR ${status}`}
</XRButton>

XR

<XR /> is a WebXR manager that configures your scene for XR rendering and interaction. This lives within a R3F <Canvas />.

<Canvas>
  <XR
    /**
     * Enables foveated rendering. Default is `0`
     * 0 = no foveation, full resolution
     * 1 = maximum foveation, the edges render at lower resolution
     */
    foveation={0}
    /** Type of WebXR reference space to use. Default is `local-floor` */
    referenceSpace="local-floor"
    /** Called as an XRSession is requested */
    onSessionStart={(event: XREvent<XRManagerEvent>) => ...}
    /** Called after an XRSession is terminated */
    onSessionEnd={(event: XREvent<XRManagerEvent>) => ...}
    /** Called when an XRSession is hidden or unfocused. */
    onVisibilityChange={(event: XREvent<XRSessionEvent>) => ...}
    /** Called when available inputsources change */
    onInputSourcesChange={(event: XREvent<XRSessionEvent>) => ...}
  >
    {/* All your regular react-three-fiber elements go here */}
  </XR>
</Canvas>

useXR

This hook gives you access to the current XRState configured by <XR />.

const {
  // An array of connected `XRController`
  controllers,
  // Whether the XR device is presenting in an XR session
  isPresenting,
  // Whether hand tracking inputs are active
  isHandTracking,
  // A THREE.Group representing the XR viewer or player
  player,
  // The active `XRSession`
  session,
  // `XRSession` foveation. This can be configured as `foveation` on <XR>. Default is `0`
  foveation,
  // `XRSession` reference-space type. This can be configured as `referenceSpace` on <XR>. Default is `local-floor`
  referenceSpace
} = useXR()

To subscribe to a specific key, useXR accepts a Zustand selector:

const player = useXR((state) => state.player)

Controllers

Controllers can be added with <Controllers /> for motion-controllers and/or <Hands /> for hand-tracking. These will activate whenever their respective input mode is enabled on-device and provide live models for a left and right XRController.

<Controllers
  /** Optional material props to pass to controllers' ray indicators */
  rayMaterial={{ color: 'blue' }}
  /** Whether to hide controllers' rays on blur. Default is `false` */
  hideRaysOnBlur={false}
/>
<Hands
  // Optional custom models per hand. Default is the Oculus hand model
  modelLeft="/model-left.glb"
  modelRight="/model-right.glb"
/>

useController

useController references an XRController by handedness, exposing position and orientation info.

const leftController = useController('left')
const rightController = useController('right')
const gazeController = useController('none')

XRController

XRController is an Object3D that represents an XRInputSource with the following properties:

index: number
controller: THREE.XRTargetRaySpace
grip: THREE.XRGripSpace
hand: THREE.XRHandSpace
inputSource: XRInputSource

Interactions

To interact with objects using controllers you can use <Interactive /> component or useInteraction hook. They allow adding controller event handlers to your objects.

Interactive

<Interactive /> wraps your objects and accepts XR controller event handlers as props. Supports select, hover, blur and squeeze events (see XR inputsources).

<Interactive
  /* Called when hovered by a controller */
  onHover={(event: XRInteractionEvent) => ...}
  /* Called when unhovered by a controller */
  onBlur={(event: XRInteractionEvent) => ...}
  /* Called on button press when selected by a controller */
  onSelectStart={(event: XRInteractionEvent) => ...}
  /* Called on button release when selected by a controller */
  onSelectEnd={(event: XRInteractionEvent) => ...}
  /* Called on button release when another interactive is selected by a controller */
  onSelectMissed={(event: XRInteractionEvent) => ...}
  /* Called when selected by a controller */
  onSelect={(event: XRInteractionEvent) => ...}
  /* Called on button press when squeezed by a controller */
  onSqueezeStart={(event: XRInteractionEvent) => ...}
  /* Called on button release when squeezed by a controller */
  onSqueezeEnd={(event: XRInteractionEvent) => ...}
  /* Called on button release when another interactive is squeezed by a controller */
  onSqueezeMissed={(event: XRInteractionEvent) => ...}
  /* Called when squeezed by a controller */
  onSqueeze={(event: XRInteractionEvent) => ...}
  /* Called when a controller moves over the object, equivalent to pointermove */
  onMove={(event: XRInteractionEvent) => ...}
>
  <Box />
</Interactive>

RayGrab

<RayGrab /> is a specialized <Interactive /> that can be grabbed and moved by controllers.

<RayGrab>
  <Box />
</RayGrab>

useInteraction

useInteraction subscribes an existing element to controller events.

The following interaction events are supported: onHover, onBlur, onSelect, onSelectEnd, onSelectStart, onSelectMissed, onSqueeze, onSqueezeEnd, onSqueezeStart, onSqueezeMissed, onMove.

const boxRef = useRef()
useInteraction(boxRef, 'onSelect', (event: XRInteractionEvent) => ...)

<Box ref={boxRef} />

useHitTest

Use this hook to perform a hit test for an AR environment. Also see XRHitTestResult.

useHitTest((hitMatrix: Matrix4, hit: XRHitTestResult) => {
  // use hitMatrix to position any object on the real life surface
  hitMatrix.decompose(mesh.position, mesh.quaternion, mesh.scale)
})

useXREvent

To handle controller events that are not bound to any object in the scene you can use useXREvent hook. This is a low-level abstraction that subscribes directly into the native XRInputSource (see XRInputSourceEvent).

useXREvent('squeeze', (event: XRControllerEvent) => ...)

It supports an optional third parameter with options for filtering by handedness.

useXREvent('squeeze', (event: XRControllerEvent) => ..., { handedness: 'left' | 'right' | 'none' })
Comments
  • added customizeable XRButton that can be used for AR/VR/Inline

    added customizeable XRButton that can be used for AR/VR/Inline

    Removes the default VRButton/ARButton in exchange for a XRButton that can be placed in the dom and completely customized as it's only a HTML

    opened by cc-bbohlender 18
  • Issue in NextJS 12

    Issue in NextJS 12

    Hi

    this code in index.js

    import { useRef, useState } from 'react'
    import { Canvas, useFrame } from '@react-three/fiber'
    import { VRCanvas } from '@react-three/xr'
    
    function Box(props) {
      // 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={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>
      )
    }
    
    export default ()=>{
    
      return (
        <VRCanvas>
          <ambientLight />
          <pointLight position={[10, 10, 10]} />
          <Box position={[-1.2, 0, 0]} />
          <Box position={[1.2, 0, 0]} />
        </VRCanvas>
      )
    
    }
    

    produces this console error:

    Uncaught     at C:\Users\61420\curious_toy\website\node_modules\ (webxr-input-profiles\motion-controllers\dist\motion-controllers.module.js:397)
        at wrapSafe (internal/modules/cjs/loader.js:988:16)
        at Module._compile (internal/modules/cjs/loader.js:1036:27)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
        at Module.load (internal/modules/cjs/loader.js:937:32)
        at Function.Module._load (internal/modules/cjs/loader.js:778:12)
        at Module.require (internal/modules/cjs/loader.js:961:19)
        at require (internal/modules/cjs/helpers.js:92:18)
        at Object.<anonymous> (file://C:\Users\61420\curious_toy\website\node_modules\@react-three\xr\dist\index.cjs.js:10:25)
        at Module._compile (internal/modules/cjs/loader.js:1072:14)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    
    bug 
    opened by curious-toy 11
  • Example that shows how to switch from vanilla r3f Canvas to VRCanvas

    Example that shows how to switch from vanilla r3f Canvas to VRCanvas

    Example request:

    How can you let someone switch from an r3f Canvas to a VRCanvas? It would be nice for there to be an example with the "switch to vr" button that does the change

    documentation 
    opened by oveddan 7
  • Refresh Rate is Low (Quest 2)

    Refresh Rate is Low (Quest 2)

    hi,

    When trying either the demo with the blue-box you can point at or the demo the stack of cubes, I had a choppy frame-rate. I'm on a Quest 2. I ran the demos in both the view where you can see the code also but also the dedicate preview window.

    ps. I did not try the other demos, but I assume it'd be the same issue.

    bug needs reproduction 
    opened by Francois-Laberge-Bose 7
  • feat: create AR/VR buttons in react, bypass context for session init

    feat: create AR/VR buttons in react, bypass context for session init

    Continues #76

    Refactors the internal XRButton and XRCanvas to exist in React and init session state outside of XR context, so buttons can exist outside of the canvas. This is fully backwards compatible with previous versions that utilize three's VRButton & ARButton.

    type XRButtonStatus = 'unsupported' | 'exited' | 'entered'
    interface XRButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
      /** The type of `XRSession` to create */
      mode: 'AR' | 'VR' | 'inline'
      /**
       * `XRSession` configuration options.
       * @see https://immersive-web.github.io/webxr/#feature-dependencies
       */
      sessionInit?: XRSessionInit
      /** Whether this button should only enter an `XRSession` */
      enterOnly?: boolean
      /** Whether this button should only exit an `XRSession` */
      exitOnly?: boolean
      /** React children, can also accept a callback returning an `XRButtonStatus` */
      children?: React.ReactNode | ((status: React.ReactNode) => React.ReactNode)
    }
    

    Additionally, XRButton and XRCanvas are now exported to enable more composition options. For example, this would be equivalent to VRCanvas:

    <XRButton mode="VR" sessionInit={sessionInit} />
    <XRCanvas>
      // ...
    </XRCanvas>
    

    Furthermore, session events are exposed as props, and reference space can be configured on the XRCanvas:

    interface XRManagerEvent {
      type: 'sessionstart' | 'sessionend'
      target: WebXRManager
    }
    interface XRControllerEvent {
      type: XRControllerEventType
      data?: XRInputSource
    }
    interface XRCanvasEvent {
      readonly nativeEvent: XRManagerEvent | XRControllerEvent | XRSessionEvent
      readonly session: XRSession
    }
    interface XRProps {
      /**
       * Enables foveated rendering,
       * 0 = no foveation = full resolution,
       * 1 = maximum foveation = the edges render at lower resolution
       */
      foveation?: number
      /** Type of WebXR reference space to use. */
      referenceSpace?: XRReferenceSpaceType
      /** Called as an XRSession is requested. */
      onSessionStart?: (event: XRCanvasEvent) => void
      /** Called after an XRSession is terminated. */
      onSessionEnd?: (event: XRCanvasEvent) => void
      /** Called when an XRSession is hidden or unfocused. */
      onVisibilityChange?: (event: XRCanvasEvent) => void
      /** Called when available inputsources change. */
      onInputSourcesChange?: (event: XRCanvasEvent) => void
      children: React.ReactNode
    }
    
    opened by CodyJasonBennett 6
  • Issues with NextJS 12.0.9

    Issues with NextJS 12.0.9

    Trying to import VRCanvas in NextJS 12.0.9

    How can this be fixed?

    SyntaxError: Unexpected token 'export'
    
    This error happened while generating the page. Any console logs will be displayed in the terminal window.
    Call Stack
    <unknown>
    file:///C:/Users/USER/Wicka/test/node_modules/%20(webxr-input-profiles/motion-controllers/dist/motion-controllers.module.js (397)
    wrapSafe
    internal/modules/cjs/loader.js (984:16)
    Module._compile
    internal/modules/cjs/loader.js (1032:27)
    Object.Module._extensions..js
    internal/modules/cjs/loader.js (1097:10)
    Module.load
    internal/modules/cjs/loader.js (933:32)
    Function.Module._load
    internal/modules/cjs/loader.js (774:14)
    Module.require
    internal/modules/cjs/loader.js (957:19)
    require
    internal/modules/cjs/helpers.js (88:18)
    Object.<anonymous>
    file:///C:/Users/USER/Wicka/test/node_modules/@react-three/xr/dist/index.cjs.js (10:25)
    Module._compile
    internal/modules/cjs/loader.js (1068:30)
    Object.Module._extensions..js
    internal/modules/cjs/loader.js (1097:10)
    
    import React, { useRef, useState } from 'react';
    import { Canvas, useFrame } from '@react-three/fiber';
    import { VRCanvas } from '@react-three/xr'
    
    function Box(props) {
      // 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={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>
      )
    }
    
    
    export default function Home() {
      return (
        <Canvas>
          <ambientLight />
          <pointLight position={[10, 10, 10]} />
          <Box position={[-1.2, 0, 0]} />
          <Box position={[1.2, 0, 0]} />
        </Canvas>
      )
    }
    
    
    opened by wicka-aus 6
  • 'HTTPS' is not recognized as an internal or external command when 'yarn start' in /exemples

    'HTTPS' is not recognized as an internal or external command when 'yarn start' in /exemples

    I get this error: "'HTTPS' is not recognized as an internal or external command, operable program or batch file." when I run 'yarn start' from the 'examples' folder.

    How to reproduce:

    1. Have a Windows PC.
    2. Install node.js and yarn
    3. git clone https://github.com/react-spring/react-xr
    4. cd react-xr
    5. yarn
    6. cd examples
    7. yarn
    8. yarn start
    opened by Thebinoman 6
  • docs: prefer Matrix4#decompose in hit test example

    docs: prefer Matrix4#decompose in hit test example

    Resolves #203.

    The useHitTest example wasn't working correctly. This updated code disables the target's matrixAutoUpdate and applies the hitMatrix directly to its matrix property (as per this example: https://github.com/immersive-web/webxr-samples/blob/main/hit-test.html)

    opened by wayfarerboy 5
  • cannot open locally hosted site in XRviewer

    cannot open locally hosted site in XRviewer

    I followed the examples exactly as they are listed in the react-XR examples to clone the repo, yarn, and then start. I am using an iphone XS with the latest version of the XR viewer and iOS. however when I try to access the locally hosted instance by going to https://<computer's-ip-address.: with both my computer and iphone on the same network WebXR is not able to access the site. Is there something missing from the instructions for accessing WebXR from a localhost? do I need to do anything specific to be able top access locally hosted instance?

    opened by JakeJustLearning 5
  • Use custom hands model with the Hands component

    Use custom hands model with the Hands component

    This PR should allow user to load their own models when using the<Hands /> component.

    They can specify a model for the left or right hands individually like so :

    <Hands
          modelLeft={"https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/left-hand-black-webxr-tracking-ready/model.gltf"}
          modelRight={"https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/right-hand-black-webxr-tracking-ready/model.gltf"}
    />
    

    If no model are specified it will load the current model.

    Let me know if you want me to code it differently / rename stuff etc.

    Once it's merged, I'll try to make a simple demo of it and add it to the readme and getting started.

    ( Also, can we rename src\webxr\HandModel.js to something else ? Maybe I'm missing why it's called Oculus, because I don't see why it's specific to Oculus )

    Thank you in advance !

    opened by AlaricBaraou 5
  • Using drei HTML is not showing anything

    Using drei HTML is not showing anything

    I have tried to add html when using react-xr. I am using HTML from drei but cannot get anything to show up.

    import React from "react";
    import { VRCanvas, DefaultXRControllers } from "@react-three/xr";
    import { Html } from "drei";
    
    function App() {
      const style = {
        heigh: "100px",
        width: "100px",
        backgroundColor: "red",
      };
      return (
        <div className="App">
          <VRCanvas>
            <ambientLight intensity={0.5} />
            <pointLight position={[5, 5, 5]} />
            <mesh position={[1, 1, 1]}>
              <Html
                prepend
                center
                fullscreen
                scaleFactor={10}
                zIndexRange={[100, 0]}
              >
                <h1 style={style}>hello</h1>
                <p>world</p>
              </Html>
            </mesh>
            <DefaultXRControllers />
          </VRCanvas>
        </div>
      );
    }
    
    export default App;
    
    opened by robin22d 5
  • Possibility of Video or I-Frame embed in React XR

    Possibility of Video or I-Frame embed in React XR

    As per my understanding, Drei Html component wont render in react XR and Drei Image component wont support video. Is there is any work around for I- Frame or Video embeed in react XR.

    enhancement question 
    opened by iamkkt 4
  • Hand mesh not visible after tracking lost/restored

    Hand mesh not visible after tracking lost/restored

    Description:

    When hand tracking is lost then restored (e.g. after hands are out-of-view for a brief time), the hand mesh sometimes does not become visible again, and will not reappear without a restart of the XR session. Interaction continues to work fine, so it's clear that react-xr knows where the hands actually are, but the mesh is not shown.

    I've been trying to track down the cause here but haven't figured out which layer (react-xr? three-stdlib? three.js? Quest?) the problem is coming from... filing the issue in case others have ideas. Thanks!

    Steps to reproduce:

    1. Run yarn dev, open the default scene, and confirm hand models appear
    2. Move hands out of view for a few seconds, then return them to view
    3. One or both hands may not appear, and will remain permanently invisible (or offscreen?). Interaction continues to work, suggesting that hand position has been recovered but the mesh is gone.

    https://user-images.githubusercontent.com/1848368/201758640-fa8b036b-0d0c-4766-b4ba-c6808ab06659.mov

    In the screen capture above, note the "Oculus" icon shown above the (missing) right hand.


    • Device: Quest 2
    • Browser: Meta Quest Browser 24.2.0
    • Version: HEAD
    bug 
    opened by donmccurdy 0
  • First person setup with physics

    First person setup with physics

    Hey,

    I've created a basic setup in which I created a first person controller and added physics to it. The demo works fine. But I believe my setup might be entirely wrong.

    Right now moving around using the controllers works well (left controller for moving, right controller for rotating). But when turning your head or your entire body the experience is wrong and directions no longer correlate with reality.

    It is also possible to walk away from / step out of the physics collider ... Right now the player object is being put at the position of the collider every frame. But maybe the collider should be put inside of the player group ? All this is a bit confusing.

    As these are my first steps in VR (and rapier) I'm mostly looking for some pointers. Any advice is much appreciated !

    Here is the link to the sandbox: https://codesandbox.io/s/r3f-xr-rapier-first-person-2uxdyb?file=/src/components/RapierScene.tsx

    question 
    opened by dreammonkey 0
  • @react-three/xr does not play well with @react-three/postprocessing

    @react-three/xr does not play well with @react-three/postprocessing

    First of all thanks a lot for this awesome library! The future is now! :D

    But it seems that when I use <EffectComposer> from @react-three/postprocessing in my scene the hit testing goes wrong. There are still hit results but the position/rotation is completely wrong.

    If I remove the <EffectComposer> everything works completely fine.

    Versions i'm using:

    • @react-three/xr: 5.0.4
    • @react-three/postprocessing: 2.4.6
    • @react-three/fiber: 8.0.19
    <XRButton
        mode="AR"
        sessionInit={{
            requiredFeatures: ['hit-test'],
            optionalFeatures: ['dom-overlay', 'dom-overlay-for-handheld-ar'],
            domOverlay: { root: document.body }
        }}
    >
    
    <Canvas
        gl={{
            preserveDrawingBuffer: true
        }}
        shadows
        frameloop="demand"
        onCreated={(rootState) => {
            rootState.camera.position.x = 12
            rootState.camera.position.y = 5
            rootState.camera.position.z = 13
        }}
    >
        <XR referenceSpace="local">
            // my 3D scene
        </XR>
        <EffectComposer autoClear={false}> // this guy messes up hit testing
            <Outline
                blur
                edgeStrength={4}
                pulseSpeed={0.5}
                visibleEdgeColor={0xffffff}
                hiddenEdgeColor={0xffffff}
            />
            <SMAA />
        </EffectComposer>
    </Canvas>
    opened by LucusWebsites 4
  • Support Plane Detection API

    Support Plane Detection API

    With Oculus Browser now supporting plane detection API, would be a nice feature to add.

    This examples works and can be used as a reference: https://immersive-web.github.io/webxr-samples/proposals/plane-detection.html

    enhancement good first issue 
    opened by richardanaya 0
  • AR Regression - Camera position does not update

    AR Regression - Camera position does not update

    Since 3.5 there has been a regression, camera position does not appear to change, camera rotation does - but the object moves away when you move your device towards in AR. You expect to be able to move the camera around the object, i.e. it is fixed in position.

    3.5.0 works as expected https://codesandbox.io/s/8w8hm 5.0.4 does not work https://codesandbox.io/s/react-xr-simple-ar-demo-forked-kdj1ui

    bug good first issue help wanted 
    opened by bknill 0
Releases(v5.1.0)
  • v5.1.0(Nov 26, 2022)

    What's Changed

    • chore(docs): tiny addition to doc change in #199 by @rekliner in https://github.com/pmndrs/react-xr/pull/210
    • chore: set up SSL for development environment by @donmccurdy in https://github.com/pmndrs/react-xr/pull/212
    • feat(XRButton): add onError prop for XR init by @firtoz in https://github.com/pmndrs/react-xr/pull/216

    New Contributors

    • @donmccurdy made their first contribution in https://github.com/pmndrs/react-xr/pull/212
    • @firtoz made their first contribution in https://github.com/pmndrs/react-xr/pull/216

    Full Changelog: https://github.com/pmndrs/react-xr/compare/v5.0.5...v5.1.0

    Source code(tar.gz)
    Source code(zip)
  • v5.0.5(Nov 1, 2022)

    What's Changed

    • docs: update default reference space by @timhc22 in https://github.com/pmndrs/react-xr/pull/199
    • docs: prefer Matrix4#decompose in hit test example by @wayfarerboy in https://github.com/pmndrs/react-xr/pull/202
    • fix: remove race condition around session events, init by @rekliner in https://github.com/pmndrs/react-xr/pull/208

    New Contributors

    • @timhc22 made their first contribution in https://github.com/pmndrs/react-xr/pull/199
    • @wayfarerboy made their first contribution in https://github.com/pmndrs/react-xr/pull/202
    • @rekliner made their first contribution in https://github.com/pmndrs/react-xr/pull/208

    Full Changelog: https://github.com/pmndrs/react-xr/compare/v5.0.4...v5.0.5

    Source code(tar.gz)
    Source code(zip)
  • v5.0.4(Oct 4, 2022)

    What's Changed

    • fix: add provided reference space type to optionalFeatures by @saitonakamura in https://github.com/pmndrs/react-xr/pull/193

    Full Changelog: https://github.com/pmndrs/react-xr/compare/v3.6.7...v5.0.4

    Source code(tar.gz)
    Source code(zip)
  • v5.0.3(Oct 3, 2022)

    What's Changed

    • fix(XR): eagerly call sessionstart when late by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/191

    Full Changelog: https://github.com/pmndrs/react-xr/compare/v5.0.2...v5.0.3

    Source code(tar.gz)
    Source code(zip)
  • v4.1.8(Oct 3, 2022)

    What's Changed

    • fix(XR): eagerly call sessionstart when late by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/191

    Full Changelog: https://github.com/pmndrs/react-xr/compare/v4.1.7...v4.1.8

    Source code(tar.gz)
    Source code(zip)
  • v3.6.7(Oct 3, 2022)

    What's Changed

    • fix(XR): eagerly call sessionstart when late by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/191

    Full Changelog: https://github.com/pmndrs/react-xr/compare/v3.6.6...v3.6.7

    Source code(tar.gz)
    Source code(zip)
  • v5.0.2(Sep 28, 2022)

    What's Changed

    • chore: update docs that mentions VRCanvas and ARCanvas which are no longer available by @smeng9 in https://github.com/pmndrs/react-xr/pull/184
    • fix(XR): purge session cache on exit by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/188

    New Contributors

    • @smeng9 made their first contribution in https://github.com/pmndrs/react-xr/pull/184

    Full Changelog: https://github.com/pmndrs/react-xr/compare/v5.0.1...v5.0.2

    Source code(tar.gz)
    Source code(zip)
  • v4.1.7(Sep 28, 2022)

    What's Changed

    • [v4] fix: fixed outdated callbacks by @CodyJasonBennett in #189

    Full Changelog: https://github.com/pmndrs/react-xr/compare/v4.1.5...v4.1.7

    Source code(tar.gz)
    Source code(zip)
  • v5.0.1(Sep 26, 2022)

    What's Changed

    • Fixed outdated callbacks by @saitonakamura in https://github.com/pmndrs/react-xr/pull/183

    Full Changelog: https://github.com/pmndrs/react-xr/compare/v5.0.0...v5.0.1

    Source code(tar.gz)
    Source code(zip)
  • v5.0.0(Aug 25, 2022)

    What's Changed

    • feat!: XR component, ARButton/VRButton by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/177

    Changes

    This release modularizes some internals into standalone components.

    DefaultControllers => Controllers

    <DefaultControllers /> is renamed to <Controllers /> for consistency (see Controllers).

    XRCanvas is removed for a general XR provider

    The internal <XRCanvas /> component is removed in favor of a separate <XR /> provider (see XR).

    <XRButton mode="VR" />
    <XRCanvas>
      // ...
    </XRCanvas>
    
    // is now
    
    <XRButton mode="VR" />
    <Canvas>
      <XR>
        // ...
      </XR>
    </Canvas>
    

    ARCanvas and VRCanvas are removed for ARButton and VRButton

    <ARCanvas /> and <VRCanvas /> are removed with their preset session settings moved to <ARButton /> and <VRButton /> (see XRButton).

    <VRCanvas>
      // ...
    </VRCanvas>
    
    // is now
    
    <VRButton />
    <Canvas>
      <XR>
        // ...
      </XR>
    </Canvas>
    

    Full Changelog: https://github.com/pmndrs/react-xr/compare/v4.1.4...v5.0.0

    Source code(tar.gz)
    Source code(zip)
  • v4.1.4(Aug 19, 2022)

    What's Changed

    • fix: regenerate types on build by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/175
    • fix: handle session exit from device by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/176

    Full Changelog: https://github.com/pmndrs/react-xr/compare/v4.1.2...v4.1.4

    Source code(tar.gz)
    Source code(zip)
  • v4.1.2(Aug 10, 2022)

    What's Changed

    • fix: unbundle for webpack tree-shaking, publish sourcemaps by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/170

    Full Changelog: https://github.com/pmndrs/react-xr/compare/v4.1.1...v4.1.2

    Source code(tar.gz)
    Source code(zip)
  • v4.1.1(Aug 9, 2022)

    What's Changed

    • fix: disable JSX transform by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/169

    Full Changelog: https://github.com/pmndrs/react-xr/compare/v4.1.0...v4.1.1

    Source code(tar.gz)
    Source code(zip)
  • v4.1.0(Jul 28, 2022)

    What's Changed

    • feat: de-duplicate intersections for select/squeeze event handlers, add intersection field by @saitonakamura in https://github.com/pmndrs/react-xr/pull/165
    • feat: add onMove event to Interactive and useInteraction by @saitonakamura in https://github.com/pmndrs/react-xr/pull/166

    Full Changelog: https://github.com/pmndrs/react-xr/compare/v4.0.1...v4.1.0

    Source code(tar.gz)
    Source code(zip)
  • v4.0.1(Jul 18, 2022)

    What's Changed

    • fix: wrap portals in fragment by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/162

    Full Changelog: https://github.com/pmndrs/react-xr/compare/v4.0.0...v4.0.1

    Source code(tar.gz)
    Source code(zip)
  • v4.0.0(Jul 18, 2022)

    What's Changed

    • feat!: react 18 support by @saitonakamura in https://github.com/pmndrs/react-xr/pull/131
    • feat!: use ambient WebXR types from @types/three by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/140
    • feat!: merge contexts into Zustand store, upstream src/webxr by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/143
    • feat!: add option to hide rays on blur (show by default) by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/148
    • feat!: make XREvent and XREventHandler generic by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/146
    • feat: create AR/VR buttons in react, bypass context for session init by @CodyJasonBennett, @bbohlender in https://github.com/pmndrs/react-xr/pull/142
    • feat: add onSelectMissed and onSqueezeMissed interactions by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/150
    • refactor: break up DefaultXRControllers, manage DefaultXRControllers and Hands in R3F by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/147
    • refactor(useHitTest): subscribe to session, cleanup source init by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/149
    • refactor: declaratively create controller models by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/153
    • fix: rollup => vite, cleanup peer deps and use cjs target by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/134
    • fix: downlevel transpile, use correct node exts by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/138
    • fix(HandModel): fix circular reference on dispose by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/139
    • fix(InteractionManager): don't pass stale state on filter by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/144
    • fix: don't create matrices on useframe, re-use hitmatrix by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/145
    • chore: fix markdown demo links for github by @rvdende in https://github.com/pmndrs/react-xr/pull/137

    Changes

    This release adds support for React 18, R3F v8, and three r141.

    useXRFrame => useFrame

    useXRFrame is removed in favor of R3F's useFrame.

    -useXRFrame((time: DOMHighResTimeStamp, frame: XRFrame) => ...)
    +useFrame((state: RootState, delta: number, frame?: XRFrame) => ...)
    

    R3F will pass an XRFrame as the third argument while in a WebXR session (see R3F migration guide).

    onSelectMissed and onSelectSqueezed interaction types

    onSelectMissed and onSqueezeMissed are now supported in useInteraction, and <Interactive /> components (see interactions).

    This mirror's R3F's onPointerMissed et al handlers.

    Improved Ray visibility

    DefaultXRControllers rays are now shown by default and can be hidden on blur with the hideRaysOnBlur prop. For <Rays />, this would be hideOnBlur.

    This is more inline with menu ray representations and examples like https://threejs.org/examples/#webxr_vr_dragging.

    Streamlined event types

    XREvent is now generic, and can wrap an XRControllerEvent, XRManagerEvent, or XRSessionEvent. XREventHandler would represent an event listener.

    
    useXREvent('select', (event: XREvent<XRControllerEvent>) => ...)
    

    XRButton and XRCanvas

    The internal XRButton and XRCanvas are now exported with expanded configuration options for session init and XRManager settings (see Custom XRButton and XRCanvas).

    Expanded XRCanvas

    XRCanvas is now exported for custom canvases. It's also expanded with session configuration options and listeners.

    <XRCanvas
      /**
       * Enables foveated rendering. Default is `0`
       * 0 = no foveation, full resolution
       * 1 = maximum foveation, the edges render at lower resolution
       */
      foveation={0}
      /** Type of WebXR reference space to use. Default is `local-space` */
      referenceSpace="local-space"
      /** Called as an XRSession is requested */
      onSessionStart={(event: XREvent<XRManagerEvent>) => ...}
      /** Called after an XRSession is terminated */
      onSessionEnd={(event: XREvent<XRManagerEvent>) => ...}
      /** Called when an XRSession is hidden or unfocused. */
      onVisibilityChange={(event: XREvent<XRSessionEvent>) => ...}
      /** Called when available inputsources change */
      onInputSourcesChange={(event: XREvent<XRSessionEvent>) => ...}
    >
      {/* All your regular react-three-fiber elements go here */}
    </XRCanvas>
    

    Customizeable XRButton

    Internal XRButton and XRCanvas were refactored to exist in React and init session state outside of XR context, so buttons can exist outside of the canvas. This is fully backward compatible with previous versions that utilize three's VRButton & ARButton.

    <XRButton
      /* The type of `XRSession` to create */
      mode={'AR' | 'VR' | 'inline'}
      /**
       * `XRSession` configuration options
       * @see https://immersive-web.github.io/webxr/#feature-dependencies
       */
      sessionInit={{ optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking', 'layers'] }}
      /** Whether this button should only enter an `XRSession`. Default is `false` */
      enterOnly={false}
      /** Whether this button should only exit an `XRSession`. Default is `false` */
      exitOnly={false}
    >
      {/* Can accept regular DOM children and has an optional callback with the XR button status (unsupported, exited, entered) */}
      {(status) => `WebXR ${status}`}
    </XRButton>
    

    Furthermore, XRButton can be composed with XRCanvas to smoothly integrate with your UI. For example, this would be equivalent to VRCanvas:

    <XRButton mode="VR" sessionInit={{ optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking', 'layers'] }} />
    <XRCanvas>
      // ...
    </XRCanvas>
    

    Full Changelog: https://github.com/pmndrs/react-xr/compare/v3.6.0...v4.0.0

    Source code(tar.gz)
    Source code(zip)
  • v3.6.0(Jul 18, 2022)

    What's Changed

    • feat: create AR/VR buttons in react, bypass context for session init by @CodyJasonBennett, @bbohlender in https://github.com/pmndrs/react-xr/pull/142
    • fix: rollup => vite, cleanup peer deps and use cjs target by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/134
    • fix: downlevel transpile, use correct node exts by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/138
    • fix(HandModel): fix circular reference on dispose by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/139
    • chore: fix markdown demo links for github by @rvdende in https://github.com/pmndrs/react-xr/pull/137
    • fix(InteractionManager): don't pass stale state on filter by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/144
    • fix: don't create matrices on useframe, re-use hitmatrix by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/145

    Changes

    We'll be releasing v4 shortly with react 18/R3F v8 support. Due to breaking changes in @types/three, r141 support will also follow in v4.

    This release backports some important fixes and features for stability and performance.

    XRButton and XRCanvas

    The internal XRButton and XRCanvas are now exported with expanded configuration options for session init and XRManager settings (see Custom XRButton and XRCanvas).

    Expanded XRCanvas

    XRCanvas is now exported for custom canvases. It's also expanded with session configuration options and listeners.

    <XRCanvas
      /**
       * Enables foveated rendering. Default is `0`
       * 0 = no foveation, full resolution
       * 1 = maximum foveation, the edges render at lower resolution
       */
      foveation={0}
      /** Type of WebXR reference space to use. Default is `local-space` */
      referenceSpace="local-space"
      /** Called as an XRSession is requested */
      onSessionStart={(event: XREvent<XRManagerEvent>) => ...}
      /** Called after an XRSession is terminated */
      onSessionEnd={(event: XREvent<XRManagerEvent>) => ...}
      /** Called when an XRSession is hidden or unfocused. */
      onVisibilityChange={(event: XREvent<XRSessionEvent>) => ...}
      /** Called when available inputsources change */
      onInputSourcesChange={(event: XREvent<XRSessionEvent>) => ...}
    >
      {/* All your regular react-three-fiber elements go here */}
    </XRCanvas>
    

    Customizeable XRButton

    Internal XRButton and XRCanvas were refactored to exist in React and init session state outside of XR context, so buttons can exist outside of the canvas. This is fully backward compatible with previous versions that utilize three's VRButton & ARButton.

    <XRButton
      /* The type of `XRSession` to create */
      mode={'AR' | 'VR' | 'inline'}
      /**
       * `XRSession` configuration options
       * @see https://immersive-web.github.io/webxr/#feature-dependencies
       */
      sessionInit={{ optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking', 'layers'] }}
      /** Whether this button should only enter an `XRSession`. Default is `false` */
      enterOnly={false}
      /** Whether this button should only exit an `XRSession`. Default is `false` */
      exitOnly={false}
    >
      {/* Can accept regular DOM children and has an optional callback with the XR button status (unsupported, exited, entered) */}
      {(status) => `WebXR ${status}`}
    </XRButton>
    

    Furthermore, XRButton can be composed with XRCanvas to smoothly integrate with your UI. For example, this would be equivalent to VRCanvas:

    <XRButton mode="VR" sessionInit={{ optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking', 'layers'] }} />
    <XRCanvas>
      // ...
    </XRCanvas>
    

    New Contributors

    • @bbohlender made their first contribution in https://github.com/pmndrs/react-xr/pull/76
    • @rvdende made their first contribution in https://github.com/pmndrs/react-xr/pull/137

    Full Changelog: https://github.com/pmndrs/react-xr/compare/v3.5.0...v3.6.0

    Source code(tar.gz)
    Source code(zip)
  • v3.5.0(May 30, 2022)

    What's Changed

    • fix(webxr): import three-stdlib from flatbundle for cjs targets by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/119
    • fix(AR/VRCanvas): cleanup button on unmount by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/127

    Full Changelog: https://github.com/pmndrs/react-xr/compare/v3.4.0...v3.5.0

    Source code(tar.gz)
    Source code(zip)
  • v3.4.0(Feb 11, 2022)

    What's Changed

    • fix(#93) entering vr will not overwrite the xr session feature list anymore by @Kalkut in https://github.com/pmndrs/react-xr/pull/94
    • Fix prepare and pack scripts by @saitonakamura in https://github.com/pmndrs/react-xr/pull/92
    • Used 'supports webxr' for babel preset env by @saitonakamura in https://github.com/pmndrs/react-xr/pull/95
    • Import GLTFLoader from three-stdlib by @marlon360 in https://github.com/pmndrs/react-xr/pull/102
    • Added console warning when XR context isn't initialized by @saitonakamura in https://github.com/pmndrs/react-xr/pull/82
    • Added intersection field to handlers other than hover/blue by @saitonakamura in https://github.com/pmndrs/react-xr/pull/84
    • chore(examples): CRA => Vite, update deps by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/107
    • fix(XRControllerModelFactory): vendor motion controller dep by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/111
    • feat(XRIntersectionEvent): filter event candidates via state.raycaster or stop on first hit by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/113
    • fix(useXRFrame): correctly react to session state changes by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/114
    • chore(useXRFrame): add deprecation notice for v8 by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/115
    • fix(webxr): add dispose methods, cleanup hands on src change by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/116
    • chore: setup GitHub Actions CI by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/117

    New Contributors

    • @Kalkut made their first contribution in https://github.com/pmndrs/react-xr/pull/94
    • @saitonakamura made their first contribution in https://github.com/pmndrs/react-xr/pull/92
    • @marlon360 made their first contribution in https://github.com/pmndrs/react-xr/pull/102

    Full Changelog: https://github.com/pmndrs/react-xr/compare/v3.2.0...v3.4.0

    Source code(tar.gz)
    Source code(zip)
  • v3.3.0(Jan 31, 2022)

    What's Changed

    • fix(#93) entering vr will not overwrite the xr session feature list anymore by @Kalkut in https://github.com/pmndrs/react-xr/pull/94
    • Fix prepare and pack scripts by @saitonakamura in https://github.com/pmndrs/react-xr/pull/92
    • Used 'supports webxr' for babel preset env by @saitonakamura in https://github.com/pmndrs/react-xr/pull/95
    • Import GLTFLoader from three-stdlib by @marlon360 in https://github.com/pmndrs/react-xr/pull/102
    • Added console warning when XR context isn't initialized by @saitonakamura in https://github.com/pmndrs/react-xr/pull/82
    • Added intersection field to handlers other than hover/blue by @saitonakamura in https://github.com/pmndrs/react-xr/pull/84
    • chore(examples): CRA => Vite, update deps by @CodyJasonBennett in https://github.com/pmndrs/react-xr/pull/107

    New Contributors

    • @Kalkut made their first contribution in https://github.com/pmndrs/react-xr/pull/94
    • @saitonakamura made their first contribution in https://github.com/pmndrs/react-xr/pull/92
    • @marlon360 made their first contribution in https://github.com/pmndrs/react-xr/pull/102

    Full Changelog: https://github.com/pmndrs/react-xr/compare/v3.2.0...v3.3.0

    Source code(tar.gz)
    Source code(zip)
  • v3.1.0(May 6, 2021)

    • Fixed GLTFLoader bug #48
    • Updated Hands component with new oculus model
    • Breaking: removed profile prop from Hands component. Now will only load deafult hands
    Source code(tar.gz)
    Source code(zip)
  • v2.0.2(Mar 21, 2021)

  • v2.0.1(Mar 11, 2021)

  • v2.0.0(Jan 27, 2021)

    Breaking changes:

    • Hover, Select components are removed and replaced by Interactive component

    Added:

    • <Interactive /> component - allows attaching event handlers to the content in the scene
    • useInteraction hook - attach events to an existing object in the scene
    • const { player, isPresenting } = useXR() - added player Group and isPresenting variables
    • useHitTest - hook to perform hit tests in AR mode
    Source code(tar.gz)
    Source code(zip)
  • v1.1.0(Aug 30, 2020)

    • Added useController hook
    • Reworked how controllers are loaded, now controllers are available only when inputSource is present
    • Handled 'disconnect' event for the controller
    • Added experimental Hands component
    • Added 'examples/' folder
    Source code(tar.gz)
    Source code(zip)
  • v1.0.6(May 21, 2020)

  • v1.0.5(May 17, 2020)

    • New component XRCanvas
    • XR renamed to XRContextProvider to encourage the use of XRCanvas

    Before:

    <Canvas onCreate={({ gl }) => /* ... create vr button */} vr>
      <XR> {/* content */} </XR>
    </Canvas>
    

    After:

    <XRCanvas>{/* content */}</XRCanvas>
    

    Codesandbox examples were updated to the latest version

    Source code(tar.gz)
    Source code(zip)
Owner
Poimandres
Open source developer collective
Poimandres
Our SDK for the 3D rendering platform React-Three-Fiber.

Zappar for React Three Fiber This library allows you use Zappar's best-in-class AR technology with content built using the 3D rendering platform React

Zappar 34 Dec 4, 2022
Small React three fiber multiplayer template

R3F.Multiplayer React three fiber, socket.io boilerplate multiplayer server and client ?? Getting started Getting started To quickly get started Clone

Or Fleisher 80 Nov 29, 2022
📬 postprocessing for react-three-fiber

react-postprocessing react-postprocessing is a postprocessing wrapper for @react-three/fiber. This is not (yet) meant for complex orchestration of eff

Poimandres 721 Dec 7, 2022
In-browser lightmap/AO baker for react-three-fiber and ThreeJS

react-three-lightmap In-browser lightmap and ambient occlusion (AO map) baker for react-three-fiber and ThreeJS. Live editable sandbox. Local Developm

Poimandres 96 Dec 3, 2022
R3f-homunculus - Ripple Effect and Distortion Effect using React Three Fiber

About このアプリケーションは、React Three Fiberを使用したPost-processingの学習結果として作成したものです。 Post-pr

null 11 Nov 13, 2022
React Three Fiber FPS control for mobile and desktop

React Three Fiber FPS control for mobile and desktop

Antony Budianto 21 Jul 13, 2022
vfx - a visual effects library for react-three-fiber

vfx is a visual effects library for react-three-fiber. It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.

Hendrik Mans 260 Nov 30, 2022
🤳 VR/AR with react-three-fiber

@react-three/xr React components and hooks for creating VR/AR applications with @react-three/fiber npm install @react-three/xr Examples These demos ar

Poimandres 1.4k Dec 2, 2022
React-three-ts-bp - [TS] Stable version for React-Three + Spring & Tailwind bp

React-three-ts-bp - [TS] Stable version for React-Three + Spring & Tailwind bp

Dale B. 2 Jan 3, 2022
A description of React's new core algorithm, React Fiber

React Fiber Architecture Introduction React Fiber is an ongoing reimplementation of React's core algorithm. It is the culmination of over two years of

Andrew Clark 9.8k Dec 4, 2022
React Fiber Tree Visualizer & Performance Metric Tool

HiFiber is a React Fiber tree visualization tool that provides a dynamic representation of the Fiber tree as it loads and updates on your browser’s page. Working with pages built in React 16+, it maps out the application structure and will also measure performance metrics – including Fiber node start time, duration, rerender time/count, and various other useful Fiber properties.

OSLabs Beta 43 Nov 16, 2022
A React component for viewing an STL object from a given URL by utilizing Three.js

React STL Viewer New maintainer needed. A React component for viewing an STL object from a given URL by utilizing Three.js Looking for contributors Se

Generate Impact 132 Nov 9, 2022
An example project integrating React with three.js

React with three.js example See the demo Created in response to this question on Stack Overflow.

Will Bamford 28 Sep 9, 2022
Gamedex built with React.js and Three.js

?? Gamedex Hello world! My internet name is Suboptimal and I am an Indian software engineer. Gamedex is the repo where I keep track of my game dev + c

Suboptimal Engineer 179 Nov 24, 2022
:tada: React Universal Hooks : just use****** everywhere (Functional or Class Component). Support React DevTools!

react-universal-hooks React Universal Hooks : just use****** everywhere. Support React >= 16.8.0 Installation Using npm: $ npm install --save react-un

Salvatore Ravidà 177 Oct 10, 2022
React ESI: Blazing-fast Server-Side Rendering for React and Next.js

React ESI: Blazing-fast Server-Side Rendering for React and Next.js React ESI is a super powerful cache library for vanilla React and Next.js applicat

Kévin Dunglas 627 Nov 29, 2022
30 Days of React challenge is a step by step guide to learn React in 30 days

30 Days of React challenge is a step by step guide to learn React in 30 days. It requires HTML, CSS, and JavaScript knowledge. You should be comfortable with JavaScript before you start to React. If you are not comfortable with JavaScript check out 30DaysOfJavaScript. This is a continuation of 30 Days Of JS. This challenge may take up to 100 days, follow your own pace.

Asabeneh 17.6k Nov 28, 2022
React Navigation for React js that tries to ensure that the elements of the navigators display correctly on devices with notches and UI elements which may overlap the app content.

React Navigation for React js that tries to ensure that the elements of the navigators display correctly on devices with notches (e.g. iPhone X) and UI elements which may overlap the app content.

MohammadAli Karimi 11 Nov 27, 2022
React People lists and connects React developers around the world.

React People React People lists and connects React developers around the world. Progress View the Project page for details on what's planned and what'

Vitor Leonel 15 Aug 23, 2022