# React で Vreo を使う

Five の内側に Vreo Provider を置き、公開の再生フックを接続します。

Canonical: https://developer.realsee.ai/ja/docs/vreo/react-integration
Source: https://developer.realsee.ai/ja/docs/vreo/react-integration.md
Language: ja

# React で Vreo を使う

React が再生 UI を所有する場合の構成です。[クイックスタート](https://developer.realsee.ai/ja/docs/vreo/quickstart) の互換版を使います。

```tsx title="examples/sdk-guides/src/vreo/react.tsx"
import { useState } from 'react'
import { createFiveProvider, FiveAutoCanvas } from '@realsee/five/react'
import type { Work } from '@realsee/five'
import { VreoProvider, useVreoAction, useVreoPausedState } from '@realsee/vreo/react'
import type { VreoUnit } from '@realsee/vreo/typings'
import '@realsee/vreo/stylesheets/default.css'

const FiveProvider = createFiveProvider()

function Controls({ unit }: { unit: VreoUnit }) {
  const { load, play, pause } = useVreoAction()
  const paused = useVreoPausedState()
  const [status, setStatus] = useState('Ready to load narrative')
  async function start() {
    setStatus('Loading narrative')
    try {
      if (!await load(unit, 0) || !play(0)) throw new Error('Narrative unavailable')
      setStatus('Playing')
    } catch { setStatus('Narrative unavailable. Check the script and media access.') }
  }
  return <div><button onClick={() => void start()}>Load and replay</button><button onClick={pause} disabled={paused}>Pause</button><p role="status">{status}</p></div>
}

// Keep FiveAutoCanvas outside VreoProvider: that provider mounts children after Player creation.
export function NarrativeScene({ work, unit }: { work: Work; unit: VreoUnit }) {
  return <FiveProvider initialWork={work}>
    <div style={{ width: '100%', height: 480 }}><FiveAutoCanvas /></div>
    <VreoProvider><Controls unit={unit} /></VreoProvider>
  </FiveProvider>
}
```

Five を参照するため VreoProvider は FiveProvider の内側に置きます。FiveAutoCanvas は VreoProvider の外に置きます。Vreo は effect で Player を生成後に子を描画するため、キャンバスを内側に置くと設置より先に Player が生成される場合があります。

解析済み Work と検証済み VreoUnit を渡し、シーン準備後に操作を提供します。この例は Provider とフックの接続であり、Work の読み込み UI は実装しません。

<span id="replay-is-explicit" class="docs-anchor-alias" aria-hidden="true"></span>

## 最初からの再生を明示する

2.6.4 の useVreoAction().play() は player.play(currentTime || 0) を呼ぶため、時刻なしなら 0 からです。操作は **Load and replay** と表示し play(0) を明示します。Resume と呼ばないでください。現在時刻から正確に再開する場合は getCurrentTime() がある [Player 操作](https://developer.realsee.ai/ja/docs/vreo/playback-controls) を使います。

useVreoPausedState() は再生状態に追従します。Provider はアンマウント時に破棄するため、同じシーンに別 Player を並行作成しないでください。

<span id="verify" class="docs-anchor-alias" aria-hidden="true"></span>

## 確認する

準備後の読み込み、停止、再生、ルート破棄を試します。実際のクライアント環境とブラウザーの音声ポリシーで検証してください。

[公開 React API](https://unpkg.com/@realsee/vreo@2.6.4/lib/react/index.d.ts) · [公開フックの実装](https://unpkg.com/@realsee/vreo@2.6.4/lib/react/index.js)