LogPanel#

A bounded tail of recent log lines — the non-scrolling companion to LogView. Shows the last height lines of a LogStore (or static lines).

Import#

TSX

import { LogPanel, createLogStore } from '@sigx/terminal';

Usage#

TSX

/** @jsxImportSource @sigx/terminal */
import { component, defineApp, onMounted, LogPanel, createLogStore } from '@sigx/terminal';

const App = component(() => {
    const log = createLogStore();
    onMounted(() => {
        let n = 0;
        const t = setInterval(() => { log.push(`event ${++n}\n`); }, 300);
        return () => clearInterval(t);
    });
    return () => (
        <box>
            <LogPanel store={log} height={5} title="recent" variant="panel" color="dim" />
        </box>
    );
});

defineApp(<App />).mount({ clearConsole: true });

Props#

Prop	Type	Notes
`store`	`LogStore`	the reactive source
`lines`	`string[]`	static lines (alternative to `store`)
`height`	`number`	number of tail lines to show
`width`	`number`	wrap width
`title`	`string`	caption
`variant`	`'bar' \| 'plain' \| 'panel'`	chrome style
`color`	token \| `#hex`	text color

LogPanel#

Import#

Usage#

Props#

See also#