useAvatar
現在のダイアログ行に対して解決されたアバターの表示状態、画像 URL、キャラクター、立ち絵を返す useAvatar フック
useAvatar は、現在の Say 行に対して解決されたダイアログのアバターを返します。表示するかどうか、画像 URL、関連する Character や立ち絵 Image への参照です。Dialog のサブツリーの内部(useDialog と同じコンテキスト)で使うことを想定しています。
使い方
import { Avatar, Dialog, Nametag, Texts, useAvatar } from "narraleaf-react";
function GameDialog() {
const avatar = useAvatar();
return (
<Dialog>
<div
style={{
display: "grid",
gridTemplateColumns: avatar.visible ? "120px 1fr" : "1fr",
gap: 16,
}}
>
{avatar.visible && <Avatar style={{ width: 120, height: 120 }} />}
<div>
<Nametag />
<Texts />
</div>
</div>
</Dialog>
);
}戻り値:DialogAvatarContext
visible: boolean— この行でアバター画像を表示すべきかどうか。src: string | null—<img src>用に解決された URL。画像がない場合はnull。character: Character | null— 話しているキャラクター(あれば)。portrait: Image | null— 解決に寄与した舞台の立ち絵Image(あれば)。alt: string— 推奨されるaltテキスト。
visible が false のとき、src は null になります。Avatar コンポーネントはこのフックを使っており、表示するものがない場合は何も描画しません。
表示されているときのメタデータ
const avatar = useAvatar();
if (avatar.visible) {
console.log(avatar.src);
console.log(avatar.character?.state.name);
console.log(avatar.portrait?.config.name);
}<Avatar /> との関係
Avatar は useAvatar() を呼び出し、既定のサイズ(96×96、objectFit: "cover"、borderRadius: 6)で <img> を描画します。上書きするには className / style を渡してください。