:atom: Build virtual reality experiences with A-Frame and React.

Overview

aframe-react

I recommend using vanilla A-Frame and aframe-state-component with static templating over aframe-react. React wastes a lot of cycles and incurs a lot of memory garbage. aframe-react is often abused where it is too easy to place 3D/real-time logic at the React layer, causing poor performance (e.g., doing React renders on ticks). aframe-react applications frequently ignore the prescribed ECS framework of A-Frame. Internally, React does tons of computation to compute what changed, and flushes it to the entire application. It is apparent React ecosystem does not care much about memory as most examples allocate functions and objects in the render method, and where immutables are popular. With only ~10ms per frame to do all computation, there is little room for React's massive system.


Build virtual reality experiences with A-Frame and React.

Examples

Fear of the Sky by Amnesty International UK Snowboards MathworldVR

Installation

Install with npm or yarn.

npm install --save aframe aframe-react react react-dom
yarn add aframe aframe-react react react-dom

Example

import 'aframe';
import 'aframe-particle-system-component';
import {Entity, Scene} from 'aframe-react';
import React from 'react';
import ReactDOM from 'react-dom';

class VRScene extends React.Component {
  render () {
    return (
      <Scene>
        <Entity geometry={{primitive: 'box'}} material={{color: 'red'}} position={{x: 0, y: 0, z: -5}}/>
        <Entity particle-system={{preset: 'snow'}}/>
        <Entity light={{type: 'point'}}/>
        <Entity gltf-model={{src: 'virtualcity.gltf'}}/>
        <Entity text={{value: 'Hello, WebVR!'}}/>
      </Scene>
    );
  }
}

ReactDOM.render(<VRScene/>, document.querySelector('#sceneContainer'));

See aframe-react-boilerplate for a basic example.

Introduction

A-Frame

A-Frame is a web framework for building virtual reality experiences. Since A-Frame is built on top of the DOM, web libraries such as React, Vue.js, Angular, Ember.js, d3.js are able to sit cleanly on top of A-Frame.

A-Frame is an entity-component-system (ECS) framework exposed through HTML. ECS is a pattern used in game development that favors composability over inheritance, which is more naturally suited to 3D scenes where objects are built of complex appearance, behavior, and functionality. In A-Frame, HTML attributes map to components which are composable modules that are plugged into <a-entity>s to attach appearance, behavior, and functionality.

Released on the same day as A-Frame, aframe-react is a very thin layer on top of A-Frame to bridge with React. aframe-react passes React props to directly A-Frame using refs and .setAttribute(), bypassing the DOM. This works since A-Frame's .setAttribute()s are able to take non-string data such as objects, arrays, or elements and synchronously modify underlying 3D scene graph.

// aframe-react's <Entity/> React Component
<Entity geometry={{primitive: 'box', width: 5}} position="0 0 -5"/>

// renders
<a-entity>

// and then applies the data directly to the underlying 3D scene graph, bypassing the DOM.
<a-entity>.setAttribute('geometry', {primitive: 'box', width: 5});
<a-entity>.setAttribute('position', '0 0 -5');

aframe-react provides the best of both worlds between A-Frame and React, the 3D and VR-oriented entity-component architecture of A-Frame, and the view and state management ergonomics of React, without penalties of attempting to use React for a VR application.

Making React Viable

A-Frame and aframe-react gives some viability for React to use in VR applications. The value proposition of React is limited to the 2D Web:

  • Improve rendering performance for 2D web pages by reducing calls to the browser's 2D layout engine via the virtual DOM.
  • Provide an predictable application structure for large 2D web applications through a structured nesting of React components, data binding, and one-way data flow.

However, these propositions fall short in 3D and VR applications:

  • In 3D and VR applications, including A-Frame, the 2D browser layout engine is not touched. Thus React's reconciliation engine can become an unpredictable performance liability for little benefit.
  • In 3D and VR applications, objects are not structured in a top-down hierarchy like 2D web applications. 3D objects can exist anywhere and interact with any other 3D object in a many-to-many manner. But React's paradigm prescribes data flow from parent-to-child, which makes it restrictive for 3D and VR applications.

A-Frame and aframe-react gives meaning and purpose to React: A-Frame provides an actual DOM for React to reconcile, diff, and bind to.

React also raises questions around performance; React is a very large library designed for a 60fps 2D Web, is it equipped to handle 90fps VR applications? 90 prop updates per second per object for many objects through React's engine causes concern in the overhead added for each operation.

aframe-react lets A-Frame handle the heavy lifting 3D and VR rendering and behavior. A-Frame is optimized from the ground up for WebVR with a 3D-oriented entity-component architecture. And aframe-react lets React focus on what it's good at: views, state management, and data binding.

Entity-Component Meets React

A-Frame's entity-component-system (ECS) pattern is tailored for 3D and VR applications. What React did for 2D web applications is what ECS did for 3D applications in terms of providing a useful abstraction. ECS promotes composability over hierarchy. In 3D applications, composability refers to composition of appearance, behavior, and logic rather than having fixed blocks. This lets us do things like define a flying robot that explodes on contact and makes robot sounds by snapping together a pre-existing model component, explode component, event handler component, sound component, and flying component.

Unfortunately, React (and the 2D web for that matter) is heavily hierarchical, which is not suited for 3D. Whereas 2D web development consisted of structuring and laying out from an assorted set of fixed 2D elements (e.g., <p>, <a>, <img>, <form>), 3D development involves objects that are infinite in complexity and type. ECS provides an easy way of defining those objects by mixing and matching plug-and-play components.

With aframe-react, we get the best of both worlds. The 3D and VR architecture of A-Frame, and the view and state ergonomics of React. React can be used to bind application and state data to the values of A-Frame components. And we still have access to all the features and performance of A-Frame as well as A-Frame's community component ecosystem.

API

aframe-react's API is very thin on top of A-Frame, less than 200 lines of source code. The API consists of just two React Components: <Entity/> and <Scene/>.

<Entity {...components}/>

<Entity/> wraps <a-entity>, the entity piece of the entity-component-system pattern. Plug in A-Frame components as React props to attach appearance, behavior, or functionality to the <Entity/>.

<Scene>
  <Entity
    geometry={{primitive: 'box', width: 5}}
    material={{color: red, roughness: 0.5, src: texture.png}}
    scale={{x: 2, y: 2, z: 2}}
    position={{x: 0, y: 0, z: -5}}/>
</Scene>

Community A-Frame components can be imported and installed through npm:

import 'aframe-particle-system-component';
import 'aframe-mountain-component';

// ...

<Scene>
  <Entity mountain/>
  <Entity particle-system={{preset: 'snow', particleCount: 5000}}/>
</Scene>

primitive

To use A-Frame primitives, provide the primitive prop with the primitive's element name (e.g., a-sphere). Mappings can be applied the same as in HTML through React props:

<Entity primitive='a-box' color="red" position="0 0 -5"/>
<Entity primitive='a-sphere' color="green" position="-2 0 -3"/>
<Entity primitive='a-cylinder' color="blue" position="2 0 -3"/>
<Entity primitive='a-sky' src="sechelt.jpg"/>

events

To register event handlers, use the events prop. events takes a mapping of event names to event handler(s). Multiple event handlers can be provided for a single event name by providing an array of functions. Try not to pass in inline functions to not trigger unnecessary React renders. Pass in binded functions instead.

For example, using the synthetic click event provided by A-Frame's cursor component, or a collided event possibly provided by a physics component.

handleClick = () => {
  console.log('Clicked!');
}

handleCollide = () => {
  console.log('Collided!');
}

render() {
  return (
    <Scene>
      <Entity events={{
        click: this.handleClick,
        collided: [this.handleCollide]}}/>
    </Scene>
  );
}

aframe-react does not support React-style onXXX event handlers (e.g., onClick). Unlike 2D web pages, VR sites are composed entirely of custom synthetic event names (which could have hyphens, be all lowercase, be camelCase, all uppercase, camel case, etc.,). The possible event names are infinite. The events prop makes it explicit what the event names to handle are.

_ref

Use aframe-react's _ref prop to add a callback to the underlying <a-entity> DOM node:

<Entity _ref={this.entityCallback}/>

<Scene {...components}/>

<Scene/> extends <Entity/> and renders <a-scene> instead of <a-entity>. Place all <Entity/>s as a child of the <Scene/> Component. There should only be one <Scene/> per page:

<Scene>
  <Entity/>
</Scene>

Best Practices

Let A-Frame and three.js handle the heavy lifting of 3D rendering and behavior, and delegate React to what it was meant for: views, state management, and data binding.

For example, don't create requestAnimationFrames to continuously throw React prop updates to A-Frame. Instead, create an A-Frame component with a tick handler such that everything is done in memory with little overhead. Do however use React to set up initial state and data binding that might configure that A-Frame component.

Using with Preact

aframe-react works with Preact. Since aframe-react uses React.Component, we have to tell Webpack to alias that to Preact.Component:

resolve: {
  alias: {
    react: 'preact'
  }
}
Comments
  • Primitives turn into geometry={{primitive:box}} when updating any geometry attribute with react state

    Primitives turn into geometry={{primitive:box}} when updating any geometry attribute with react state

    Hi, I'm working on a small aframe-react app where I need to update different geometry attributes via react state (like this: geometry={{ width: this.state.width }}).

    When I'm using the geometry.primitive property everything works as expected, but when I'm using Primitives or the aframe-react-components module, all aframe-primitives are getting updated to geometry={{ primitive: 'box' }} when I update the react state.

    This works as expected:

    <Entity
      geometry={{ primitive: 'plane', width: this.state.width, height: '2' }}
      material={{color: 'blue' }}
      position='-4 -1.5 -8'
      onClick={this.changeWidth.bind(this)} />
    

    This works onload, but when I update this.state.width the geometry.primitive of the <a-plane />-Element changes to 'box'

    <Entity
       primitive='a-plane'
       geometry={{ width: this.state.width, height: '2' }}
       material={{color: 'blue' }}
       position='-4 2.5 -8'
       onClick={this.changeWidth.bind(this)} />
    

    I used the aframe-react-boilerplate to build a basic demo of the bug. The upper row uses aframe Primitives, the lower row uses the geometry.primitive property. Live Demo with v0.4.0 (Code)

    | onload | after this.setState({}) | | ------------- | ------------- | | before-state-update | after-state-update |

    bug 
    opened by Stefie 15
  • a-collada-model - model does not appear

    a-collada-model - model does not appear

    I'm trying to run the "Anime UI" example from aframe on aframe-react, but I'm unable to load engine.dae. It just does not appear.

    My Scene contains the following code:

    <a-assets>
      <a-asset-item id="engine" src="models/engine.dae" />
    </a-assets>
    
    <Entity primitive="a-entity" position="1.75 0 1.2" rotation="0 28 0">
      <Entity primitive="a-camera" near="0.1" user-height="0" />
    </Entity>
    
    <Entity primitive="a-entity" position="0 0 -3">
      <Entity primitive="a-collada-model" src="#engine" rotation="90 0 0" scale="18 18 18" />
    </Entity>
    

    Can anyone please tell me what I'm doing wrong and why the model is not appearing.

    Thanks!

    opened by anton6 11
  • Aframe primitive mappings and systems support

    Aframe primitive mappings and systems support

    This is one of many attempts I've had at getting this to work over the last week. And it still doesn't work 100%.

    Let me know your thoughts on the below - any suggestions?

    Known issues

    • Systems don't seem to work 100%. In particular the physics component is a bit odd. It appears to half work, starting some of the physics simulation, but the position and rotation components have values that are NaN. When the exact same structure is used outside of aframe-react, it works without problem.
    • The issues go away if the inspector is opened then closed (Wha!?)

    Other attempts

    • Using debug on the scene. Didn't appear to have any noticable effect
    • Using flushToDOM on the ref once it was available. Also didn't seem to make much change
    • Listening for the entity/scene loaded event, then using flushToDOM. This had a similar result to the one in this PR

    Example

    The kyeboard controls component isn't correctly added to the entity with the camera. You can see this by using A/D to move the camera. The expected behaviour is for it to rotate. The observed behaviour is strafing.

    import React from 'react';
    import {Scene, Entity} from 'aframe-react';
    import aframe from 'aframe';
    import ReactDOM from 'react-dom';
    import aframeExtras from 'aframe-extras';
    import aframeKeyboardControls from 'aframe-keyboard-controls';
    
    aframe.registerComponent('keyboard-controls', aframeKeyboardControls);
    aframeExtras.primitives.registerAll(aframe);
    aframeExtras.controls.registerAll(aframe);
    
    const Catch = React.createClass({
      render() {
        return (
          <Scene className="scene">
    
            <Entity primitive="a-grid" position="0 0 0" />
    
            <Entity
              primitive="a-box"
              position="0 3 -2"
              width="0.5"
              height="0.5"
              depth="0.5"
              color="#EF2D5E"
            />
    
            <Entity
              camera="userHeight: 1.6"
              keyboard-controls="mode: fps"
              universal-controls="movementEnabled: false; rotationControls: hmd"
              position="0 1.6 4"
            />
    
          </Scene>
        );
      },
    });
    
    document.addEventListener('DOMContentLoaded', _ => {
      ReactDOM.render(<Catch />, document.querySelector('#catch-scene'));
    });
    
    opened by jesstelford 10
  • Support generic event names

    Support generic event names

    Note: Conflicts are due to being based off commit ef1ecc7. For more info, see https://github.com/ngokevin/aframe-react/pull/23#issuecomment-252394171. For the actual diff of this PR, see here.

    Note 2: This PR supersede's https://github.com/ngokevin/aframe-react/pull/36

    This PR removes the limitation of attached events being those listed in the propTypes. Instead, any prop that matches /^on[A-Z]/ will be converted from camelCase to kebab-case and attached as an event listener.

    For example, the aframe-click-drag-component emits events dragstart, dragend, dragmove, so the usage of it with aframe-react would be:

    <Entity click-drag
      geometry="primitive: box" material={{color: this.state.color}}
      position="0 0 -5"
      onDragstart={()=>console.log('drag started')}
      onDragend={()=>console.log('drag ended')}
    >
    
    opened by jesstelford 10
  • Do not discard non-component properties when using primitives

    Do not discard non-component properties when using primitives

    Hacking on a short hand library for using aframe react's primitives in aframe-react-components. Essentially mapping:

    <Sphere radius={5} /> to <Entity primitive='a-sphere' radius={5} /> which should map to <a-sphere radius='5' />

    But currently, the short hand properties provided by primitives are discarded, requiring a user to define with the full component mapping, like <Entity primitive='a-sphere' geometry={{ radius: 5 }} />.

    Is it possible to know these mappings for stock primitives? Dug around a bit, and couldn't seem to find a way to expose these via the AFRAME global. Still new to aframe-react, so I might be missing something, but if this sounds good (and it's possible to get these mappings), I'll work on a PR

    bug 
    opened by jsantell 8
  • Performance

    Performance

    I like the concept of the type of coding patterns that aframe-react allows us to use in defining 3D scenes,

    but it seems like there is a performance concern: props (f.e. position) can be passed to the React components as arrays of numbers, which get converted into strings to be passed into the custom elements, which get converted back into numbers for use internally by A-Frame/Three.js.

    That 3-step conversion will happen on every tick while animating a component's prop like position repeatedly.

    Is it something to be concerned about? How do you recommend handling animations?

    opened by trusktr 8
  • Use of the asset management system within aframe-react?

    Use of the asset management system within aframe-react?

    It's unclear to me how we use the asset management system- when combining these two abstractions. Like in here, for example, we're using a reference id- if we were using React, seems like we'd want the a-assets to be its own component. https://github.com/aframevr/aframe/blob/master/examples/boilerplate/360-video/index.html

    opened by sdras 8
  • Remove props passed with null

    Remove props passed with null

    It would be nice, if the Entity component filters received props to exclude null values and instead uses to the default A-Frame value. IMHO this would more conform with the way React handles null values.

    This would also make it simpler to add default props passed to entities. For example:

    class Camera extends Component {
      static defaultProps = {
        position: null,
      };
    
      render() {
        const { position } = this.props;
    
        const camera = {
          userHeight: 1.6,
        };
    
        return (
          <Entity
            position={position}
            camera={camera}
            look-controls
          />
        );
      }
    }
    

    At the moment this produces the following error at https://github.com/ngokevin/aframe-react/blob/master/src/index.js#L104: Uncaught TypeError: Cannot read property 'constructor' of null

    With a okay from you @ngokevin I could build a small PR for this.

    opened by lennerd 6
  • Some components cannot be used until React Component is mounted

    Some components cannot be used until React Component is mounted

    When adding a raycaster and cursor component (to represent an <a-cursor>) to an entity, the element gets created before mounted to the DOM, causing the raycaster component's this.el.sceneEl to be undefined (as it has yet to be mounted), throwing an error and causing the scene to fail to render. A work around is to wait until the component is mounted to DOM and then adding more components, but this took some time to figure out. Similar to assumptions in #50 of when things are mounted and initialized, I wonder if there's a general way of handling this for all components.

    import React, { Component, PropTypes } from 'react';
    import { Entity } from 'aframe-react';
    
    class CameraComponent extends Component {
      constructor() {
        super();
        this.state = {
          mounted: false,
        };
      }
    
      componentDidMount() {
        this.setState({ mounted: true });
      }
    
      render() {
        const mountedProps = {};
    
        if (this.state.mounted) {
          mountedProps.cursor = 'maxDistance: 100; fuse: true; fuseTimeout: 1000'
        };
    
        return (
          <Entity id='camera-container' {...this.props}>
            <Entity camera>
              <Entity
                {...mountedProps}
                raycaster='objects: .action'    
                geometry='primitive: plane'>
              </Entity>
            </Entity>
          </Entity>
        );
      }
    };
    
    export default CameraComponent;
    
    bug 
    opened by jsantell 6
  • Invoke .emit() on a ref for Animation?

    Invoke .emit() on a ref for Animation?

    As from the docs, following this pattern:

    <Entity ref="box" geometry="primitive: box" material="opacity: 1">
      <Animation attribute="material.opacity" begin="fade" to="2 2 2" />
    </Entity>
    
    this.refs.box.emit("fade");
    
    Uncaught TypeError: _this.refs.box.emit is not a function
    

    How does one properly implement this?

    opened by maxkrieger 6
  • Canvas invisible on second render

    Canvas invisible on second render

    Apologies for submitting a very custom issue that likely is not the fault of aframe-react, but I could really use a second pair of eyes on this. I've built a small example of switching between a normal html/css rendering and an aframe rendering of the same data using aframe-react starting from the boilerplate.

    The example is running here: http://immersionftw.com/meetup-vr/ The code is here: https://github.com/RSpace/aframe-meetup-example

    If you:

    1. Switch to "VR mode" by clicking the button
    2. Switch back to "2d mode" by looking down and clicking the red sphere with the cursor
    3. Switch to "VR mode" once again by clicking the button

    ... you will see that the canvas is not shown the second time "VR mode" is entered. By profiling the canvas in Firefox it is clear that the canvas is indeed rendered the second time, so it might be something as simple as a styling issue. But I just can't figure out why it's different the second, and if the problem is on my code, aframe-react or aframe-core.

    Any ideas?

    opened by RSpace 6
  • How to read the rotation and position of the camera

    How to read the rotation and position of the camera

    Is it possible to access the rotation and position of the camera in a similar way to a-frame https://aframe.io/docs/1.3.0/components/camera.html

    looking for a way to read the rotation constantly

    thanks

    opened by slaymantis 1
  • Bump predefine from 0.1.2 to 0.1.3

    Bump predefine from 0.1.2 to 0.1.3

    Bumps predefine from 0.1.2 to 0.1.3.

    Commits
    • 7eed221 0.1.3
    • 8c8c73e fix: add github workflow badge
    • bbd2ebc chore: remove travis
    • a1051e5 chore: add github action test
    • 2b75066 dist: update dependencies
    • 6f0f12f dist: add package lock file
    • 1a86a01 Merge pull request #12 from ohad2712/fix/address-prototype-pollution-vulnerab...
    • 045c1c7 Update index.js
    • 29851b6 fix: Address prototype pollution vulnerability in merge function
    • 238137e Merge pull request #9 from bigpipe/greenkeeper/assume-1.5.0
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by swaagie, a new releaser for predefine since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • How to use loader with draco compression

    How to use loader with draco compression

    I tried to load this model: https://market.pmnd.rs/model/wall but it won't show up.

    I tried to enable the draco decoder via <Scene gltfModel="dracoDecoderPath: https://www.gstatic.com/draco/versioned/decoders/1.4.1/"/> but with no luck.

    opened by netgfx 1
  • Bump karma from 0.13.22 to 6.3.16

    Bump karma from 0.13.22 to 6.3.16

    Bumps karma from 0.13.22 to 6.3.16.

    Release notes

    Sourced from karma's releases.

    v6.3.16

    6.3.16 (2022-02-10)

    Bug Fixes

    • security: mitigate the "Open Redirect Vulnerability" (ff7edbb)

    v6.3.15

    6.3.15 (2022-02-05)

    Bug Fixes

    v6.3.14

    6.3.14 (2022-02-05)

    Bug Fixes

    • remove string template from client code (91d5acd)
    • warn when singleRun and autoWatch are false (69cfc76)
    • security: remove XSS vulnerability in returnUrl query param (839578c)

    v6.3.13

    6.3.13 (2022-01-31)

    Bug Fixes

    • deps: bump log4js to resolve security issue (5bf2df3), closes #3751

    v6.3.12

    6.3.12 (2022-01-24)

    Bug Fixes

    • remove depreciation warning from log4js (41bed33)

    v6.3.11

    6.3.11 (2022-01-13)

    Bug Fixes

    • deps: pin colors package to 1.4.0 due to security vulnerability (a5219c5)

    ... (truncated)

    Changelog

    Sourced from karma's changelog.

    6.3.16 (2022-02-10)

    Bug Fixes

    • security: mitigate the "Open Redirect Vulnerability" (ff7edbb)

    6.3.15 (2022-02-05)

    Bug Fixes

    6.3.14 (2022-02-05)

    Bug Fixes

    • remove string template from client code (91d5acd)
    • warn when singleRun and autoWatch are false (69cfc76)
    • security: remove XSS vulnerability in returnUrl query param (839578c)

    6.3.13 (2022-01-31)

    Bug Fixes

    • deps: bump log4js to resolve security issue (5bf2df3), closes #3751

    6.3.12 (2022-01-24)

    Bug Fixes

    • remove depreciation warning from log4js (41bed33)

    6.3.11 (2022-01-13)

    Bug Fixes

    • deps: pin colors package to 1.4.0 due to security vulnerability (a5219c5)

    6.3.10 (2022-01-08)

    Bug Fixes

    • logger: create parent folders if they are missing (0d24bd9), closes #3734

    ... (truncated)

    Commits
    • ab4b328 chore(release): 6.3.16 [skip ci]
    • ff7edbb fix(security): mitigate the "Open Redirect Vulnerability"
    • c1befa0 chore(release): 6.3.15 [skip ci]
    • d9dade2 fix(helper): make mkdirIfNotExists helper resilient to concurrent calls
    • 653c762 ci: prevent duplicate CI tasks on creating a PR
    • c97e562 chore(release): 6.3.14 [skip ci]
    • 91d5acd fix: remove string template from client code
    • 69cfc76 fix: warn when singleRun and autoWatch are false
    • 839578c fix(security): remove XSS vulnerability in returnUrl query param
    • db53785 chore(release): 6.3.13 [skip ci]
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Why is this image being loaded both by react and then by frame?

    Why is this image being loaded both by react and then by frame?

    Hello!

    I noticed some odd behaviour. When I'm loading a particular image, "SI.jpg" in the attached screenshot, I've noticed both react and aframe make independent requests to load it. Does anyone have any idea why this might be happening?

    Screenshot 2020-03-30 at 11 12 50

    (The image is requested in an <a-assets> <img> tag)

    opened by rvanderspuy 1
Releases(v4.0.3)
  • v4.0.3(Mar 28, 2017)

    v4 of aframe-react improves performance, simplifies the API, adds full test coverage, and fixes all open issues in one sweep by changing how React passes down props to A-Frame.

    Before

    Props were serialized to strings (e.g., geometry={primitive: 'box', width: 5} to geometry="primitive: box; width: 5) and dumped into the DOM. A-Frame would receive updates through the DOM. The issues with this was that the logic for serialization was not solid, and going through the DOM was not performant because it meant we often would be serializing to strings only for A-Frame to parse it back into an object.

    Other issues arose with A-Frame not being initialized when React was rendering DOM. Or React rendering React Components in isolation, attempting to initializing components on entities that were not attached to the DOM.

    After

    Props are passed directly to A-Frame through .setAttribute(). A-Frame's .setAttribute()s can handle objects, arrays, and other non-string data so no serialization or parsing is needed. aframe-react uses React's refs to grab a handle on the DOM element, which ensures that the element has mounted before aframe-react tries to pass any data. By removing all logic and passing directly through to A-Frame, things are much simpler and more performant by not having to touch the DOM. Everything is in memory.

    onXXX React-style handlers were removed in favor of the events prop. onXXX caused ambiguity in mapping to custom event names because event names could have hyphens, be lower case, be upper case, or a mix of lower case and upper case. The events objects makes the event names explicit. onXXX may also be confusing because in normal React, those map to events provided by the DOM (e.g., onClick). In VR, these events are purely custom and synthetic.

    events now also correctly handles the removal or addition of event handlers when the events prop is updated.

    As a related change, since props are passed directly to A-Frame as-is, we can no longer pass coordinates in array form (e.g., position={[1, 2, 3]}). We may pass them using objects (i.e., position={{x: 1, y: 2, z: 3}}).

    Source code(tar.gz)
    Source code(zip)
Owner
Supermedium
Space of immersive VR utilities. Maintainers of A-Frame.
Supermedium
InvaUI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

Inva UI Sponsored by English • Table of Contents Quick start Install Install The easiest way to use Inva UI is to install it from npm $ npm install @i

Shaun Mak 4 Nov 8, 2021
Pancake UIkit is a set of React components and hooks used to build pages on Pancake's apps.

?? Pancake UIkit Pancake UIkit is a set of React components and hooks used to build pages on Pancake's apps. It also contains a theme file for dark an

PolyPup 1 Nov 4, 2021
A set of React components and hooks used to build pages on Wakanda's apps

Wakanda UIkit is a set of React components and hooks used to build pages on Wakanda's apps. It also contains a theme file for dark and light mode.

wakandaswap 0 Dec 16, 2021
FAQ-Accordion-Card build with React.js and hooks (useState), e2e testing with Cypress

?? FAQ Accordion Card - React.js Welcome! ?? This is my solution for Frontend Mentor challenge. ?? Live Link / Demo Link: https://alapina.github.io/FA

Anna Lapina 39 Oct 2, 2022
YGDL Network UIkit is a set of React components and hooks used to build pages on Zaigar Finance's apps

YGDL Network UIkit is a set of React components and hooks used to build pages on Zaigar Finance's apps. It also contains a theme file for dark and light mode.

null 0 Feb 6, 2022
Build your frontend faster with Formation—20+ react-based UI components.

Build your frontend faster with Formation—20+ react-based UI components. Free and open-source.

Josh Schneider 139 Sep 6, 2022
Toolchain to help build React components with Primer

Toolchain to help build React components with Primer Requirements webpack 5+ Setup npm install @primer/react-scripts --save-dev Storybook Step 1. Add

Primer 7 Aug 26, 2022
Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System

Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System powered by Reakit System.

Timeless 197 Sep 26, 2022
A labeler component that Lays out text and overlays textual decorations like labels, predictions, and relations based on given data and handles user interactions on tokens.

A labeler component that Lays out text and overlays textual decorations like labels, predictions, and relations based on given data and handles user interactions on tokens.

Microsoft 19 Sep 15, 2022
react-var-ui is a simple React component library for variable setting and preview, inspired by iOS settings, react-dat-gui and dat.gui.

react-var-ui is a simple React component library for variable setting and preview, inspired by iOS settings, react-dat-gui and dat.gui. While some cod

Mat Sz 66 Sep 16, 2022
🎭 A React Native and Expo library to mask text and inputs

This is a library to mask Text and Input components in React Native and Expo (Android, iOS and Web).

Akinn Rosa 276 Sep 24, 2022
Mantine is a MIT licensed open source react components and hooks library with focus on usability, accessibility and developer experience.

React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience

Mantine 14.9k Oct 4, 2022
Simple, Easy To Use and Customisable ScrollSpy component for react with callback, typescript, auto-update URL hash and throttle support among others.

React UI ScrollSpy ✨ Installation npm install --save react-ui-scrollspy OR yarn add react-ui-scrollspy ?? Demo Try it your self here! ⚙️ Usage In your

Hussain Pettiwala 31 Sep 10, 2022
React component for upload files or images with easier and faster, support multiple upload and there are several themes.

This is the react component for upload files or images with easier and faster, support multiple upload and there are several themes.

Ibnu Nugraha 7 Mar 25, 2022
ClearX is an alternative way to Redux and MobX to maintain the application state and provides a simple interface to bind it to UI components

ClearX is an alternative way to Redux and MobX to maintain the application state and provides a simple interface to bind it to UI components. It has utilities to set or get deep properties of nested data using paths.

Autodesk 20 Sep 15, 2022
dataminr-react-components - Collection of reusable React Components and utility functions.

react-components A collection of reusable React components with their own Flux lifecycle. What's inside react-components? Table Component From a simpl

Dataminr 264 Aug 5, 2022
React tooltip is a React.JS Component that brings usefull UX and UI information in selected elements of your website.

React Tooltip ✅ React tooltip is a React.JS Component that brings usefull UX and UI information in elements of your website. Installation ⌨️ React Too

Marc Ramos 1 Dec 22, 2021
React-daisyui 🌼 DaisyUI components built with React, Typescript and TailwindCSS

react-daisyui ?? DaisyUI components built with React, Typescript and TailwindCSS. ?? Check out our Storybook | ?? Try it with CodeSandbox ?? Need help

null 305 Oct 1, 2022
🌈 A UI Design Language and React UI library

Ant Design An enterprise-class UI design language and React UI library. English | Português | 简体中文 ✨ Features ?? Enterprise-class UI designed for web

Ant Design Team 82.1k Oct 1, 2022