LogViewer
log-viewerDisplays leveled log lines with timestamps, sources, wrapping, and auto-scroll.
Usage
Basic usage
lines Data-driven rendering, level fields colored by level (info/warn/error/success/command).
<LogViewer
lines={[
{ level: "command", message: "▸ npm run build" },
{ level: "info", message: "compiling 248 modules…" },
{ level: "success", message: "✓ compiled in 8.1s" },
{ level: "error", message: "2 problems (1 error, 1 warning)" },
]}
/>timestamp + source prefix
showTimestamp renders the timestamp at the beginning of the line; line.source weakens the rendering before the main text.
<LogViewer
showTimestamp
lines={[
{ level: "command", timestamp: "12:00:01", message: "▸ npm run build" },
{ level: "warn", timestamp: "12:00:05", source: "[ts]", message: "unused var 'x' at app.tsx:42" },
{ level: "success", timestamp: "12:00:09", message: "✓ compiled in 8.1s" },
]}
/>Streaming append (automatically stick to the bottom)
autoScroll is enabled by default, and new lines are appended to the bottom; the running logic is left on the consumer side, and the component is only rendered.
<LogViewer lines={lines} showTimestamp height={220} />Wrap mode
wrap After opening, long lines will wrap instead of horizontal scrolling, and the entire text can be read even in narrow containers.
<LogViewer
wrap
lines={[
{ level: "error", message: "Error: connect ECONNREFUSED 127.0.0.1:5432 ...This is a very long log" },
]}
/>When to use
Use LogViewer for structured build, CI, and runtime streams that need level styling, timestamps, and bottom-following behavior. It renders real log data; use a terminal mockup for decorative typing demos, or Conversation for AI chat.
Import
import { LogViewer, levelClass } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| lines* | LogLine[] | — | Data-driven log lines. |
| showTimestamp | boolean | false | Shows each timestamp before its line. |
| autoScroll | boolean | true | Follows new lines only while the user is already at the bottom; scrolling up pauses following until they return. |
| maxLines | number | — | Renders only the last N lines; 0 or omission keeps all lines. The input array is unchanged. |
| wrap | boolean | false | Wraps long lines; otherwise they scroll horizontally. |
| height | number | string | 320 | Scroll-region height. |
| className | string | — | Custom class name. |
LogLine is { level?: LogLevel; message: ReactNode; timestamp?: string; source?: string }.LogLevel is "info"\|"warn"\|"error"\|"debug"\|"success"\|"command" (info by default; command highlights executed commands or prompt lines, while source, such as "[build]", is muted before the message).
Pitfalls
- Keep stream timing and append logic in the consumer; LogViewer only renders
linesand follows the bottom. autoScrollis sticky, not forced. Its bottom check allows an 8 px tolerance for subpixel and inertial scrolling.- Set
maxLinesfor long-running streams to avoid accumulating tens of thousands of DOM nodes. - ANSI escape sequences are not parsed. Strip them or map them to
LogLine.levelbefore rendering. - With the default
wrap={false}, long lines scroll horizontally. Enable wrapping in narrow containers when full text must remain visible.
Related
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable