Skip to main content

View as Markdown · AI documentation index

Interface: TextComponent

Defined in: packages/core/src/passages/story/types.ts:61

Component for displaying text content in the story. Supports rich text, JSX elements, and multi-line content with preserved whitespace.

Example​

// Simple text
{ type: 'text', content: 'Once upon a time...' }

// Multi-line text
{ type: 'text', content: 'Line 1\nLine 2\nLine 3' }

// JSX content
{ type: 'text', content: <><strong>Bold</strong> and <em>italic</em></> }

Extends​

  • BaseComponent

Properties​

content​

content: ReactNode

Defined in: packages/core/src/passages/story/types.ts:72

The text or React element to display. Supports strings, numbers, JSX elements, and any valid React node. Multi-line text is rendered with preserved whitespace and line breaks.

id?​

optional id: string

Defined in: packages/core/src/passages/story/types.ts:27

Optional unique identifier for this component. Can be used to reference or manipulate specific components programmatically.

Example​

{ type: 'text', id: 'intro-text', content: 'Welcome!' }

Inherited from​

BaseComponent.id

initialVariant?​

optional initialVariant: "display" | "hidden" | "disclosure"

Defined in: packages/core/src/passages/story/types.ts:42

Controls the initial visibility state of the component.

Remarks​

This property is designed for future UI implementation to support dynamic component visibility. Currently defined but not yet implemented in the UI layer.

  • "display" - Component is visible and rendered immediately (default behavior)
  • "hidden" - Component exists but is not visible initially
  • "disclosure" - Component is initially collapsed/hidden but can be expanded by user interaction

Default Value​

"display"

Inherited from​

BaseComponent.initialVariant

props?​

optional props: object

Defined in: packages/core/src/passages/story/types.ts:77

Optional configuration for styling and behavior.

className?​

optional className: string

CSS class name(s) to apply to the text container. Can be used to customize text appearance (color, font, alignment, etc.).

Example​
props: { className: 'text-lg font-bold text-center' }

isHTML?​

optional isHTML: boolean

When true, renders the content as raw HTML using dangerouslySetInnerHTML. This allows using HTML markup in .ts files without needing JSX/TSX.

Default Value​
false
Remarks​
  • Only works when content is a string. If content is a ReactNode, this prop is ignored and the content is rendered normally.
  • The browser handles HTML parsing natively and is forgiving with malformed HTML.
  • Security: Since game authors control their own content, XSS is not a concern. Do not use with untrusted user input.
Example​
// In a .ts file (no JSX needed)
{
  type: 'text',
  content: '<strong>Bold</strong> and <em>italic</em> text',
  props: { isHTML: true }
}

type​

type: "text"

Defined in: packages/core/src/passages/story/types.ts:65

Discriminator property identifying this as a text component.