react-360-gaze-button - GitLite

KO | EN

gitlite — search

#react #graphql #golang #automation #bash #python #mysql #rag #php #vue

react-360-gaze-button

(★ 64)

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

파일 탐색기

ZIP 다운로드

- - index-test.js
- - 360_world.jpg
- .babelrc
- .flowconfig
- .gitignore
- .watchmanconfig
- client.js
- index.html
- index.js
- package.json
- rn-cli.config.js
- yarn.lock
- index.js
.babelrc
.gitignore
gaze-button.gif
LICENSE
package-lock.json
package.json
README.md
yarn.lock

# CDN으로 사용하기

jsDelivr

jsDelivr는 공개 GitHub 리포지토리를 별도 설정 없이 CDN으로 즉시 서빙합니다. 버전과 파일을 고르면 웹페이지에 바로 붙일 수 있는 링크와 예시 코드가 만들어집니다.

버전

파일

링크

예시

명령어 용어집

이 문서에서 사용된 명령어를 모아봤습니다. 낯선 명령어가 있다면 펼쳐서 확인해보세요.

🔍

`npm`

설명 보기 ▼

JavaScript 및 Node.js 패키지 관리자.
Node.js 프로젝트 및 모듈 의존성을 관리합니다.
더 많은 정보: <https://docs.npmjs.com/cli/npm/>.

npm init {{[-y|--yes]}}

기본값으로 `package.json` 파일 생성 (`--yes`를 생략하면 대화식으로 진행):

npm {{[i|install]}}

package.json에 의존성으로 나열된 모든 패키지를 다운로드:

npm {{[i|install]}} {{package_name}}@{{version}}

특정 버전의 패키지를 다운로드하고 `package.json`의 의존성 목록에 추가:

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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

<img src="./gaze-button.gif"/>

# 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 (
      <View style={styles.panel}>
        <GazeButton
          duration={3000}
          onClick={this.setGazed}
          render={(remainingTime, isGazed) => (
            <View style={styles.greetingBox}>
              <Text style={styles.greeting}>
                {gazed
                  ? "You have gazed me"
                  : isGazed
                    ? remainingTime
                    : "Gaze me"}
              </Text>
            </View>
          )}
        />
      </View>
    );
  }
}

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)