https://github.com/mathdroid/react-360-gaze-button

👀 Extension of React 360's `VrButton`. Gaze for `{duration}` to click the button!
https://github.com/mathdroid/react-360-gaze-button

button gaze react react-vr vr

Last synced: about 2 months ago
JSON representation

👀 Extension of React 360's `VrButton`. Gaze for `{duration}` to click the button!

• Host: GitHub
• URL: https://github.com/mathdroid/react-360-gaze-button
• Owner: mathdroid
• License: mit
• Created: 2017-04-24T09:15:14.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2019-04-17T19:56:58.000Z (over 5 years ago)
• Last Synced: 2024-11-01T09:46:10.281Z (2 months ago)
• Topics: button, gaze, react, react-vr, vr
• Language: JavaScript
• Homepage:
• Size: 22.1 MB
• Stars: 64
• Watchers: 5
• Forks: 10
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-360-gaze-button

> 👀 Extension of React 360's `VrButton`. Gaze for {duration} ms to click the button!



# Usage

1.  Install

```bash

npm i --save react-360-gaze-button

```

2.  Import to your file add pass it `onClick` (function) and `duration` (number, ms, defaults to 1000 ms) as props. Renders a `children` function prop that receives 3 arguments, in this order: `remainingTime`: Remaining time to gaze in ms, `isGazed`: boolean that indicates whether the button is being gazed, and `gazeTimestamp`: the timestamp of the latest onEnter event, `null` if `isGazed` is `false`, and returns a component. You can also pass a `render` prop with 3 argument, same as using `children`.

3.  You can pass any other props and it will be pased to the `VrButton` instance.

```js

import React from "react";

import { AppRegistry, StyleSheet, Text, View } from "react-360";

import GazeButton from "react-360-gaze-button";

export default class custom360 extends React.Component {

  state = {

    gazed: false

  };

  setGazed = () => {

    this.setState({ gazed: true });

  };

  render() {

    const { gazed } = this.state;

    return (

      

         (

            

              

                {gazed

                  ? "You have gazed me"

                  : isGazed

                    ? remainingTime

                    : "Gaze me"}

              

            

          )}

        />

      

    );

  }

}

const styles = StyleSheet.create({

  panel: {

    // Fill the entire surface

    width: 1000,

    height: 600,

    backgroundColor: "rgba(255, 255, 255, 0.4)",

    justifyContent: "center",

    alignItems: "center"

  },

  greetingBox: {

    padding: 20,

    backgroundColor: "#000000",

    borderColor: "#639dda",

    borderWidth: 2

  },

  greeting: {

    fontSize: 30

  }

});

AppRegistry.registerComponent("custom360", () => custom360);

```

# License

MIT. See [LICENSE](./LICENSE)