רכיבי תוכן

הרכיבים האלה מרנדרים Markdown, קוד, הבדלים ואותיות גדולות על רשת התאים.

#<Markdown>

⁦Markdown⁩ בטוח להזרמה. יש להעביר מחרוזת שגדלה והפריים נשאר יציב.

const [text, setText] = useState("");useEffect(() => stream.on("token", (t) => setText((s) => s + t)), []);return <Markdown>{text}</Markdown>;

#<Code>

הדגשת תחביר עבור ts, tsx, json, bash, python, rust, go ועוד.

<Code code={source} language="tsx" showLineNumbers maxHeight={12} />

#<Diff>

הבדלים בפורמט מאוחד, או הבדלים שמחושבים מתוך { before, after }.

<Diff patch={{ before, after, filename: "app/page.tsx" }} />

#<Spinner>

גרסאות: dots, pulse, matrix, line ו-braille (לטרמינלים; ב-Menlo אין גליפים של ברייל). הטיימרים נעצרים בזמן השהיה.

<Spinner variant="dots" label="Building…" />

#<AsciiFont>

אותיות פיקסלים גדולות לכותרות.

<AsciiFont text="▼ TEXT.JS" color="accent" />

יש להשתמש ב-font="compact" לגרסה בגובה 3 שורות. יש להעביר גופן FIGlet מתוך @textjs/font, כמו font={slant}, לאותיות figlet.