Renderers

TypingFlow operates on "nodes" to build a typing snapshot. Renderer is a function that should render a snapshot after processing each command. The package has several ready-made renderers.

Types

type TypingSnapshot = {
  content: Array<string>;
  cursorPosition: number;
};

type RendererType = (
  typingSnapshot: TypingSnapshot
) => void;

Simple Browser Renderer

Will display each character by wrapping it in a span with the specified classes. TypingFlow does not provide any styles. You can customize the display as you like.

my-browser-renderer.ts

import { simpleBrowserRenderer } from "typing-flow/renderers";

type BrowserRendererConfig = {
  selector: string;
  baseNodeClasses?: string[]; // default: typing-node
  nodeWithCursorClasses?: string[]; // default: typing-node_with-cursor
};

const myBrowserRenderer = simpleBrowserRenderer({
  selector: ".example",
  baseNodeClasses: ["typing-node"],
  nodeWithCursorClasses: ["typing-node_with-cursor"],
});

Attribute Renderer

Translates the current state of the animation into the specified container attributes.

my-attribute-renderer.ts

import { attributeRenderer } from "typing-flow/renderers";

export type AttributeRendererConfig<T extends HTMLElement> = {
  selector: string;
  attributes: (keyof T | `data-${string}`)[];
}

const myAttributeRenderer = attributeRenderer<HTMLInputElement>({
    selector: ".example",
    attributes: ["placeholder", "data-text"]
});

HTML Renderer

You can use HTML syntax in text command when using this renderer.

example

text(
    "<b class='bold'>Hello, <i class='cursive green'>Typing Flow</i></b>",
    { delay: 100 }
)

my-html-renderer.ts

import { htmlRenderer } from "typing-flow/renderers";

type HtmlRendererConfig = {
  selector: string;
  baseNodeClasses?: string[]; // default: typing-node
  nodeWithCursorClasses?: string[]; // default: typing-node_with-cursor
};

const myHtmlRenderer = htmlRenderer({
  selector: ".example",
  baseNodeClasses: ["typing-node"],
  nodeWithCursorClasses: ["typing-node_with-cursor"],
});

Custom Renderer

Renderer is a function like this:

const someRenderer = (
  typingSnapshot: TypingSnapshot
) => {
  // render behavior
};

If you want to parametrize the renderer, you can do it like this:

// definition
const someRenderer = (...args: unknown[]): RendererType => {
  return (typingSnapshot) => {
    // render behavior
  };
};


// usage
new TypingFlow({
  renderer: someRenderer(...args),
});