# "@morphscreen/web/react"

> The Answer component for React 18 and later, and the props for your own components.

```tsx
import { Answer, type CustomProps } from "@morphscreen/web/react";

<Answer core={core} text={text} done={done} onAction={send} />;
```

## Answer

| Prop | Type | What it is |
|---|---|---|
| `core` | `Core` | from `loadCore` |
| `text` | `string` | the answer so far; when it grows, only the new part is read |
| `stream` | `AsyncIterable<string>` | or the chunks as they arrive |
| `done` | `boolean` | the answer is complete |
| `packs` | `string[]` | packs beyond core |
| `custom` | `Pack[]` | your own packs |
| `components` | `Record<string, ComponentType<CustomProps>>` | React components for your own components, by name |
| `onAction` | `(action: Action) => void` | what the reader did |
| `imageHosts` | `string[]` | hosts pictures may load from |
| `maps` | `MapTiles` | your map provider and key |
| `maplibre` | module | MapLibre GL, for live maps |
| `className` | `string` | your classes for the answer's element, which keeps `ms-answer` too |

## CustomProps

```ts
type CustomProps = { attrs: Attrs; html: string; text: string };
```

`attrs` are the component's attributes as the model wrote them, and `html` and `text` its content. [React](/docs/integrations/react) has a whole example.