Components

These are the React components Web UI builds the interface from. Get them with getComponents. You can use them in your own interface, or decorate getComponents to replace one.

Layout

App

The root of the interface. Shows the Scene, with the Menu over it, and the MenuToggle on top.

App(): ReactNode

Example

const { App } = getComponents();

<App />;

Scene

Shows the current frames on an InkCanvas, with the story text from view state over them, and plays the active cue.

Scene(): ReactNode

Example

const { Scene } = getComponents();

<Scene />;

InkCanvas

The WebGL canvas that draws the artwork. Its children are shown on top, so text and interface sit over the art.

InkCanvas(props: {
  children?: ReactNode;
  presented: Presented;
}): ReactNode

Example

const { InkCanvas, BlockContent } = getComponents();
const { content, presented } = getViewState();

<InkCanvas presented={presented}>
  <BlockContent lines={content} />
</InkCanvas>;

Menus

Menu

Shows the menu on top of the menu stack, from menuSchema in view state.

Menu(): ReactNode

Gets the menu’s wrapper from getMenuComponent, and each field’s component from getMenuFieldComponent. Each field updates as soon as its value or the reader’s text language changes.

Example

const { Menu } = getComponents();

<Menu />;

MenuPanel

The default menu wrapper. Draws the menu’s fields over the layer its schema names, so the menu’s artwork decides where its interface goes.

MenuPanel(props: {
  children?: ReactNode;
  schema: MenuSchema;
}): ReactNode

If the menu doesn’t name a layer, or its artwork has no matching layer, the menu is centered on the canvas. The panel stays over its layer as the canvas resizes or the camera moves.

MenuToggle

A button in the top-right corner of the screen that runs toggleMenu. It opens the title menu, or closes the menu on top.

MenuToggle(): ReactNode

Example

const { MenuToggle } = getComponents();

<MenuToggle />;

I18n

Shows the interface text for a key from getI18nValue, and updates when the reader’s text language changes.

I18n(props: {
  children?: string;
  id?: string;
  values?: Record<string, number | string>;
}): ReactNode

The key is id if you provide one, and the text inside the tag otherwise.

Example

const { I18n } = getComponents();

<button type="button">
  <I18n>Cancel</I18n>
</button>;

<I18n id="button" values={{ index: 20 }} />;

Story text

BlockContent

Shows a block of dialogue and narration from Novel’s content. Each line is shown with DialogContent or NarrationContent.

BlockContent(props: { lines: Array<ContentLine> }): ReactNode

Example

const { BlockContent } = getComponents();

<BlockContent lines={content} />;

DialogContent

Shows a line of dialogue, with a CharacterName and the line’s text.

DialogContent(props: {
  lexia: DialogLexia;
  showName: boolean;
}): ReactNode

showName comes from the line’s ContentLine.

Example

const { DialogContent } = getComponents();

<DialogContent lexia={lexia} showName={showName} />;

NarrationContent

Shows a line of narration.

NarrationContent(props: { lexia: NarrationLexia }): ReactNode

Example

const { NarrationContent } = getComponents();

<NarrationContent lexia={lexia} />;

CharacterName

Shows a speaker’s name. Shows nothing when canHide is true.

CharacterName(props: {
  canHide: boolean;
  name: undefined | null | string;
}): ReactNode

Example

const { CharacterName } = getComponents();

<CharacterName canHide={false} name="Sophia" />;

InlineContent

Shows a piece of inline content with the matching component: TextContent, LinkContent, or ExpressionContent.

InlineContent(props: { lexia: InlineLexia }): ReactNode

Example

const { InlineContent } = getComponents();

{
  lexia.content.map((inline, key) => (
    <InlineContent key={key} lexia={inline} />
  ));
}

TextContent

Shows plain text. Shows nothing if the text is blank.

TextContent(props: { lexia: TextLexia }): ReactNode

Example

const { TextContent } = getComponents();

<TextContent lexia={lexia} />;

LinkContent

Shows an inline link. Clicking it calls navigate with the link.

LinkContent(props: { lexia: LinkLexia }): ReactNode

Example

const { LinkContent } = getComponents();

<LinkContent lexia={lexia} />;

ExpressionContent

Shows the value of an inline expression, from the current beat’s expression values. Shows nothing if the value is blank.

ExpressionContent(props: { lexia: ExpressionLexia }): ReactNode

Example

const { ExpressionContent } = getComponents();

<ExpressionContent lexia={lexia} />;