Capture user interaction in React 360 with VrButton component
Most web apps are interactive and React 360 apps are no exception.
In this lesson we are going to learn how to add interactivity to VR apps using a <VrButton/> component to react to onClick, onEnter and onExit events to build an interactive UI in VR.
Instructor: [0:00] We have an updated version of our app, so we have a single view component. Inside of this view component, we are entering some flags, which are displayed over here over, it's in the service. So far, our app has been entirely static, as in I was not able to actually do anything with any of those components.
[0:15] It's time we changed that and add some interactivity to our React 360 application. To do that, first import vrButton from React 360. Next, wrap this flag component inside of a vrButton like this. Let me move the key to vrButton component, and then we're going to attach some events to this vrButton.
[0:33] First, we can add an onClick. It's going to take a function, and it's going to console.log click. Let me copy that, because we are also going to add an onEnter, as well as onExit, like this. After I save and I refresh that, we can open dev tools to check the result.
[0:51] If I hover my mouse over the flag of Spain, I'm going to get "enter" in the console. If I move my mouse away from the flag of Spain, I'm going to get an exit. If I click on it, I'm going to get the click event triggered.
[1:03] Right now, we have our events connected to this vrButton. Important thing to note to this when it comes to vrButton is that onEnter and onExit behave differently based on the device. If I were to run this app inside of a VR headset, if I were to literally look at the flag of Spain, then I would get the onEnter handle triggered.
[1:20] If I looked away from the flag, then I would get the onExit. We would like to add some state to our app. Basically, if I hover over some of those flags, I would like to make it more visible to indicate that it's currently active.
[1:31] To do that, jump to flag JS component. Over here, by default, we're going to make the opposite of the flag to .7. By default, all our flags are inactive. Next, we're going to add active, and I'm going to make the opacity one.
[1:44] Let me destructure that from styles, and we are going to also destructure both image and active flag from these props. Next, we need to modify this type prop. I'm going to pass in the flag prop, and whenever the active flag is equal to current image, we're going to apply the active styles as well.
[2:02] Let me save that, and let's go back to the index.js. Let's add some state. By default, we're going to have a state that active flag is an empty string. We're going to change this onEnter handler. Instead of console.log, I'm going to do this.setState, and we're going to set the active flag to current image.
[2:20] I'm going to do something similar to the onExit handler, but I'm going to reset the active flag to an empty string. We need to pass in this active flag state to flag component as well. I'm going to do this state, active flag.
[2:35] After I save and refresh that, we have the desired effect. Right now, if I hover over any of those flags, it's clear which one is currently being active.