{"id":13716055,"url":"https://github.com/mathdroid/react-360-gaze-button","last_synced_at":"2025-05-08T02:45:42.014Z","repository":{"id":57347508,"uuid":"89220572","full_name":"mathdroid/react-360-gaze-button","owner":"mathdroid","description":"👀 Extension of React 360's `VrButton`. Gaze for `{duration}` to click the button! ","archived":false,"fork":false,"pushed_at":"2019-04-17T19:56:58.000Z","size":23148,"stargazers_count":64,"open_issues_count":1,"forks_count":10,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-19T16:19:09.282Z","etag":null,"topics":["button","gaze","react","react-vr","vr"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mathdroid.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-24T09:15:14.000Z","updated_at":"2023-10-12T05:44:47.000Z","dependencies_parsed_at":"2022-08-28T03:01:39.613Z","dependency_job_id":null,"html_url":"https://github.com/mathdroid/react-360-gaze-button","commit_stats":null,"previous_names":["mathdroid/react-vr-gaze-button"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathdroid%2Freact-360-gaze-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathdroid%2Freact-360-gaze-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathdroid%2Freact-360-gaze-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathdroid%2Freact-360-gaze-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mathdroid","download_url":"https://codeload.github.com/mathdroid/react-360-gaze-button/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252989938,"owners_count":21836665,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["button","gaze","react","react-vr","vr"],"created_at":"2024-08-03T00:01:06.598Z","updated_at":"2025-05-08T02:45:41.993Z","avatar_url":"https://github.com/mathdroid.png","language":"JavaScript","readme":"# react-360-gaze-button\n\n\u003e 👀 Extension of React 360's `VrButton`. Gaze for {duration} ms to click the button!\n\n\u003cimg src=\"./gaze-button.gif\"/\u003e\n\n# Usage\n\n1.  Install\n\n```bash\nnpm i --save react-360-gaze-button\n```\n\n2.  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`.\n\n3.  You can pass any other props and it will be pased to the `VrButton` instance.\n\n```js\nimport React from \"react\";\nimport { AppRegistry, StyleSheet, Text, View } from \"react-360\";\n\nimport GazeButton from \"react-360-gaze-button\";\n\nexport default class custom360 extends React.Component {\n  state = {\n    gazed: false\n  };\n\n  setGazed = () =\u003e {\n    this.setState({ gazed: true });\n  };\n  render() {\n    const { gazed } = this.state;\n    return (\n      \u003cView style={styles.panel}\u003e\n        \u003cGazeButton\n          duration={3000}\n          onClick={this.setGazed}\n          render={(remainingTime, isGazed) =\u003e (\n            \u003cView style={styles.greetingBox}\u003e\n              \u003cText style={styles.greeting}\u003e\n                {gazed\n                  ? \"You have gazed me\"\n                  : isGazed\n                    ? remainingTime\n                    : \"Gaze me\"}\n              \u003c/Text\u003e\n            \u003c/View\u003e\n          )}\n        /\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  panel: {\n    // Fill the entire surface\n    width: 1000,\n    height: 600,\n    backgroundColor: \"rgba(255, 255, 255, 0.4)\",\n    justifyContent: \"center\",\n    alignItems: \"center\"\n  },\n  greetingBox: {\n    padding: 20,\n    backgroundColor: \"#000000\",\n    borderColor: \"#639dda\",\n    borderWidth: 2\n  },\n  greeting: {\n    fontSize: 30\n  }\n});\n\nAppRegistry.registerComponent(\"custom360\", () =\u003e custom360);\n```\n\n# License\n\nMIT. See [LICENSE](./LICENSE)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathdroid%2Freact-360-gaze-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmathdroid%2Freact-360-gaze-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathdroid%2Freact-360-gaze-button/lists"}