> For AI agents: the complete documentation index is available at /toi/ja/llms.txt, the full documentation bundle is available at /toi/ja/llms-full.txt.

# 追加の Props

`ToiProps<Response>` が持っているプロパティは `ref`、`resolve`、`reject` だけです。しかし実際のコンポーネントでは、表示するメッセージや削除対象のアイテムなど、それ以外の Props が必要になることがほとんどです。これらはコンポーネント自身の Props の一部として定義し、`toi` の第 2 引数を経由して渡します。

```tsx preview="iframe-follow"
import { toi, ToiHost } from '@praha/toi';

import type { ToiProps } from '@praha/toi';
import type { FC } from 'react';

type ConfirmProps = ToiProps<boolean> & { message: string };

const Confirm: FC<ConfirmProps> = ({ ref, resolve, message }) => (
  <dialog ref={ref} open>
    <p>{message}</p>
    <button onClick={() => resolve(true)}>OK</button>
    <button onClick={() => resolve(false)}>Cancel</button>
  </dialog>
);

export default function App() {
  return (
    <>
      <button onClick={() => toi(Confirm, { message: 'Are you sure?' })}>
        Delete
      </button>
      <ToiHost />
    </>
  );
}
```

`toi` は `Confirm` 自身の Props の型から、レスポンスの型と追加の Props の両方を推論します。`toi` の呼び出し自体に型を注釈する必要はありません。

## オプションか必須か

`toi`（または [`toi.fn`](/toi/ja/guide/basic/reusable-functions.md) が返す関数）の第 2 引数を省略できるかどうかは、追加の Props 自体から推論されます。すべての追加 Props がオプションであれば引数も省略可能に、いずれかが必須であれば引数も必須になります。

```tsx
type ConfirmProps = ToiProps<boolean> & { message?: string };

const Confirm: FC<ConfirmProps> = ({ ref, resolve, message = 'Are you sure?' }) => (/* ... */);

await toi(Confirm); // OK — `message` はオプション
await toi(Confirm, { message: 'Really?' }); // これも OK
```

```tsx
type ConfirmProps = ToiProps<boolean> & { message: string };

const Confirm: FC<ConfirmProps> = ({ ref, resolve, message }) => (/* ... */);

await toi(Confirm); // 型エラー — `message` は必須
await toi(Confirm, { message: 'Are you sure?' }); // OK
```

## インラインコンポーネント

インラインで定義したコンポーネントを渡す場合、その Props をそのままでは推論できないため、`Response`（と、`ToiProps` 以外に必要なものがあれば `Props` も）を明示的に注釈してください。

```tsx preview="iframe-follow"
import { toi, ToiHost } from '@praha/toi';

import type { ToiProps } from '@praha/toi';

type ConfirmProps = ToiProps<boolean> & { message: string };

export default function App() {
  return (
    <>
      <button
        onClick={() => toi<boolean, ConfirmProps>(({ ref, resolve, message }) => (
          <dialog ref={ref} open>
            <p>{message}</p>
            <button onClick={() => resolve(true)}>OK</button>
            <button onClick={() => resolve(false)}>Cancel</button>
          </dialog>
        ), { message: 'Are you sure?' })}
      >
        Delete
      </button>
      <ToiHost />
    </>
  );
}
```