@sonoba/voice-client-react

@sonoba/voice-client の React hooks + Provider。

インストール

npm install @sonoba/voice-client @sonoba/voice-client-react

クイックスタート

import { SonobaVoiceProvider, useVoice } from '@sonoba/voice-client-react';

function App() {
  return (
    <SonobaVoiceProvider serverUrl="wss://your-server.com/ws">
      <VoiceUI />
    </SonobaVoiceProvider>
  );
}

function VoiceUI() {
  const { connect, disconnect, status, messages } = useVoice();

  return (
    <div>
      <button onClick={connect}>開始</button>
      <button onClick={disconnect}>終了</button>
      <p>状態: {status}</p>
      {messages.map((msg, i) => (
        <p key={i}>[{msg.role}] {msg.text}</p>
      ))}
    </div>
  );
}

hooks

useVoice() — 全部入り

全ての状態と操作をまとめて取得します。手軽に使いたいときに。

const {
  connect, disconnect, sendText,  // 操作
  status, isConnected, isReady,   // 接続状態
  isMuted, setMuted,              // マイク
  messages, lastMessage,          // メッセージ履歴
} = useVoice();

個別 hooks — パフォーマンス最適化

必要な状態だけ購読することで不要な再レンダリングを防げます。

const { connect, disconnect, sendText } = useVoiceControls(); // 操作のみ
const { status, isConnected, isReady } = useVoiceStatus();    // 状態のみ
const { isMuted, setMuted } = useVoiceMic();                  // マイクのみ
const { messages, lastMessage } = useVoiceMessages();          // メッセージのみ

ライセンス

MIT © sonoba