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

App is the root of the interface. It shows the Scene, with the Menu over it, and the MenuToggle on top.

App(): ReactNode

Example

const { App } = getComponents();

<App />;

Scene

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

InkCanvas is 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

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

Menu(): ReactNode

It 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

MenuPanel is the default menu wrapper. It 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

MenuToggle is a button in the top-right corner of the screen that runs toggleMenu. It opens the pause menu during a story, or closes the menu on top.

MenuToggle(): ReactNode

Example

const { MenuToggle } = getComponents();

<MenuToggle />;

I18n

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

BlockContent shows a block of dialogue and narration from Novel’s content. It shows each line with DialogContent or NarrationContent.

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

Example

const { BlockContent } = getComponents();

<BlockContent lines={content} />;

DialogContent

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

NarrationContent shows a line of narration.

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

Example

const { NarrationContent } = getComponents();

<NarrationContent lexia={lexia} />;

CharacterName

CharacterName shows a speaker’s name, unless canHide is true.

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

Example

const { CharacterName } = getComponents();

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

InlineContent

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

TextContent shows plain text, unless the text is blank.

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

Example

const { TextContent } = getComponents();

<TextContent lexia={lexia} />;

LinkContent

LinkContent shows an inline link. When the reader clicks it, it calls navigate with the link.

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

Example

const { LinkContent } = getComponents();

<LinkContent lexia={lexia} />;

ExpressionContent

ExpressionContent shows the value of an inline expression, from the current beat’s expression values. If the value is blank, it shows nothing.

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

Example

const { ExpressionContent } = getComponents();

<ExpressionContent lexia={lexia} />;