Component reference
ReadBlock
Displays a supplied file window; never opens the named path.
Preview
ReadBlock has no story of its own; this one draws it as part of a composed scene.
Multi-line syntax and raw copy
render: () => (
<Stack>
<ReadBlock
label="src/example.ts"
lang="typescript"
totalLines={120}
maxLines={6}
lines={[
"/* comment starts",
" still a comment",
" const notCode = 'comment';",
" comment continues",
" whitespace is preserved ",
" comment closes */",
"const result: number = 42;",
"",
"export { result };",
].map((text, index) => ({ number: index + 41, text }))}
/>
<ReadBlock
label="unknown.grammar"
lang="not-a-supported-language"
lines={[{ number: 7, text: " <script> plain text " }]}
/>
</Stack>
)Installation
bun add meowtail
Usage
Taken from the examples on this page.
import { ReadBlock } from "meowtail";
<ReadBlock
label="unknown.grammar"
lang="not-a-supported-language"
lines={[{ number: 7, text: " <script> plain text " }]}
/>Examples
Other stories that draw ReadBlock.
Terminal, file, diff, and search
render: () => (
<Stack>
<TerminalBlock
command="bun test"
cwd="meowland"
exitCode={0}
output={
"\u001b[32mPASS\u001b[0m renderer\n" +
Array.from({ length: 24 }, (_, i) => `case ${i + 1}: passed`).join("\n")
}
/>
<ReadBlock
label="src/main.ts"
totalLines={120}
lines={Array.from({ length: 24 }, (_, i) => ({
number: i + 41,
text: `const item${i} = ${i};`,
highlighted: i === 2,
}))}
/>
<DiffBlock
files={[
{
path: "theme.ts",
lines: [
{ kind: "context", text: "export const theme = {" },
{ kind: "removed", text: " radius: 8," },
{ kind: "added", text: " radius: 16," },
{ kind: "context", text: "};" },
],
},
]}
/>
<SearchBlock
kind="matches"
total={20}
truncated
files={[
{ path: "src/theme.ts", matches: [{ lineNumber: 12, line: "export const theme = {};" }] },
{
path: "src/main.ts",
matches: [{ lineNumber: 4, line: "import { theme } from './theme';" }],
},
]}
/>
</Stack>
)API reference
Props
| Prop | Type | Default |
|---|---|---|
label | string | "File content" |
linesRequired | readonly ReadBlockLine[] | – |
totalLines | number | – |
langGrammar hint for the entire supplied window; unknown grammars retain plain text. | string | – |
maxLines | number | – |
onCopy | (text: string) => Promise<void> | – |
Also takes className, children and the attributes and events of its root element.
DOM parts
rootnumbertext
Registry
The component is registered as read-block in the meowtail component registry.