Skip to main content

Class: Story

Defined in: passages/story/story.ts:44

Text-based narrative passage for displaying story content with rich components.

Story passages support various component types including text, headers, images, videos, actions, conversations, and embedded stories. Content is defined via a function that receives props and returns an array of components.

Example​

import { newStory } from '@react-text-game/core';

const introStory = newStory('intro', (props) => [
  {
    type: 'header',
    content: 'Chapter 1',
    props: { level: 1 }
  },
  {
    type: 'text',
    content: 'Your journey begins...'
  },
  {
    type: 'actions',
    content: [
      {
        label: 'Continue',
        action: () => Game.jumpTo('chapter-1')
      }
    ]
  }
], {
  background: { image: '/bg.jpg' },
  classNames: { container: 'story-container' }
});

See​

newStory - Factory function for creating Story instances

Extends​

Constructors​

Constructor​

new Story(id, content, options): Story

Defined in: passages/story/story.ts:62

Creates a new Story passage.

Parameters​

id​

string

Unique identifier for this story

content​

StoryContent

Function that returns an array of story components

options​

StoryOptions = {}

Optional configuration for background, styling, etc.

Returns​

Story

Overrides​

Passage.constructor

Properties​

id​

readonly id: string

Defined in: passages/passage.ts:34

Unique identifier for this passage. Used for navigation and registry lookup.

Inherited from​

Passage.id

type​

readonly type: PassageType

Defined in: passages/passage.ts:40

The type of this passage. Determines how the passage should be rendered in the UI.

Inherited from​

Passage.type

Methods​

display()​

display<T>(props): object

Defined in: passages/story/story.ts:88

Renders the story by invoking the content function with props.

The content function receives props and returns an array of components (text, headers, images, actions, etc.) that make up the story.

Type Parameters​

T​

T extends InitVarsType = EmptyObject

Type of props to pass to the content function

Parameters​

props​

T = ...

Properties used during rendering (e.g., player state, game flags)

Returns​

object

Object containing story options and rendered components

components​

components: Component[]

options?​

optional options: StoryOptions

Example​

const story = newStory('test', () => [
  { type: 'text', content: 'Hello' }
]);

const { components, options } = story.display();
// components: [{ type: 'text', content: 'Hello' }]

Overrides​

Passage.display