Core widgets
TermCanvas
The TermCanvas widget is a simple implementation of TermElement that accepts a render prop called instead of renderContent when rendering the widget.
Props
render
Function that will be called to render the widget's content. This prop will be called in place of the widget's renderContent function and must adhere to the same rules.
Example
A note about performances
Keep in mind terminal protocols aren't well designed for high performance graphics. The use of RGB colors in this example makes us transmit at least 13 bytes per cell, which is a lot of data for a terminal to handle.
import {TermElementclass TermElement, renderfunction render(element: React.ReactNode): Promise<void> (+1 overload)Render a React element into the terminal. Return a promise that resolves when the screen is closed.} from 'terminosaurus/react';
function renderFnfunction renderFn(element: TermElement, x: number, y: number, l: number): string(elementelement: TermElement: TermElementclass TermElement, xx: number: number, yy: number: number, ll: number: number) {
let reslet res: string = ``;
for (let tlet t: number = 0; tlet t: number < ll: number; ++tlet t: number) {
const rconst r: number = Mathvar Math: MathAn intrinsic object that provides basic mathematics functionality and constants..floorMath.floor(x: number): numberReturns the greatest integer less than or equal to its numeric argument.((xx: number + tlet t: number) / elementelement: TermElement.contentRectTermElement.contentRect: Rect.ww: number * 255);
const gconst g: number = Mathvar Math: MathAn intrinsic object that provides basic mathematics functionality and constants..floorMath.floor(x: number): numberReturns the greatest integer less than or equal to its numeric argument.(yy: number / elementelement: TermElement.contentRectTermElement.contentRect: Rect.hh: number * 255);
const bconst b: 0 = 0;
reslet res: string += `\x1b[38;2;${rconst r: number};${gconst g: number};${bconst b: 0}m█`;
}
return reslet res: string;
}
function PrettyColorsfunction PrettyColors(): React.JSX.Element() {
return <termJSX.IntrinsicElements['term:canvas']: {
key?: string | undefined;
ref?: React.Ref<TermCanvas> | undefined;
} & Partial<AllPropertiesInputs> & {
render?: TermCanvasRenderFn | null | undefined;
decorated?: boolean | undefined;
} & AllReactEventsFor<...>:canvasJSX.IntrinsicElements['term:canvas']: {
key?: string | undefined;
ref?: React.Ref<TermCanvas> | undefined;
} & Partial<AllPropertiesInputs> & {
render?: TermCanvasRenderFn | null | undefined;
decorated?: boolean | undefined;
} & AllReactEventsFor<...> widthwidth?: string | number | undefined={`100%`} heightheight?: string | number | undefined={`100%`} renderrender?: TermCanvasRenderFn | null | undefined={renderFnfunction renderFn(element: TermElement, x: number, y: number, l: number): string}/>;
}
renderfunction render(element: React.ReactNode): Promise<void> (+1 overload)Render a React element into the terminal. Return a promise that resolves when the screen is closed.(<PrettyColorsfunction PrettyColors(): React.JSX.Element/>);