Skip to main content

Function: defineStory()

defineStory<TProps>(id, content, options?): Story

Defined in: packages/core/src/passages/story/fabric.ts:81

Creates a story passage from a helpers-first content callback.

The callback receives the StoryHelpers toolbox as its first argument and the display props as its second. Helpers return plain Component objects, so helper calls and hand-written component literals can be mixed in the same array, and falsy entries are dropped so conditional content can be written inline.

Type Parameters

TProps

TProps extends InitVarsType = EmptyObject

Type of props passed to story.display()

Parameters

id

string

Unique identifier for the story

content

StoryContentFn<TProps>

Function returning the story's components

options?

StoryOptions

Optional background and styling configuration

Returns

Story

New Story instance, already registered with the Game

Examples

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

defineStory('forest', (h) => [
h.header('The Whispering Woods', { level: 1 }),
h.image('/forest.webp', { alt: 'A mysterious forest path' }),
h.text('The forest is ancient and alive.'),
player.hasKey && h.text('The rusty key feels warm in your pocket.'),
h.actions([
{ label: 'Go deeper', action: h.jump('forest-deep') },
{ label: 'Turn back', action: h.jump('village') }
])
], {
background: { image: '/backgrounds/forest.webp' }
});
// Typed props, resolved when display() is called explicitly
const greeting = defineStory<{ playerName: string }>(
'greeting',
(h, props) => [h.text(`Hello, ${props.playerName}!`)]
);

greeting.display({ playerName: 'Hero' });

See

newStory - Previous props-first factory, still supported