Science
Math
LaTeX rendering with KaTeX, themed to the surrounding text color. MathRenderer is the inline or display equation; FormulaBlock wraps one in a card with a title and a symbol legend.
KaTeX is an optional peer dependency. Install it and import its stylesheet once: npm i katex and import "katex/dist/katex.min.css". Without it the raw LaTeX is shown.
Import
tsx
import { MathRenderer, FormulaBlock } from "@indoku/ui"import "katex/dist/katex.min.css"Examples
Inline
The quadratic formula is x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} for any equation of the form ax^2 + bx + c = 0.
tsx
function MathInline() { return ( <p> The quadratic formula is <MathRenderer latex="x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}" /> for any equation of the form <MathRenderer latex="ax^2 + bx + c = 0" />. </p> )}Display
Centered display style with display.
\int_0^{\infty} e^{-x^2}\,dx = \frac{\sqrt{\pi}}{2}
tsx
function MathDisplay() { return <MathRenderer display latex="\int_0^{\infty} e^{-x^2}\,dx = \frac{\sqrt{\pi}}{2}" />}FormulaBlock
Title, equation and a symbol legend.
Wave speed
The speed of a wave equals its frequency times its wavelength.
v = f\lambda
v
speed (m/s)
ffrequency (Hz)
\lambdawavelength (m)
tsx
function FormulaBlockDemo() { return ( <FormulaBlock title="Wave speed" description="The speed of a wave equals its frequency times its wavelength." latex="v = f\lambda" variables={[ { symbol: "v", meaning: "speed (m/s)" }, { symbol: "f", meaning: "frequency (Hz)" }, { symbol: "\\lambda", meaning: "wavelength (m)" }, ]} /> )}Fallback
Shown as monospace text while KaTeX loads.
E = mc^2
tsx
function MathFallback() { // Until KaTeX has loaded (or when it is missing), the raw LaTeX is shown in monospace. return <MathRenderer latex="E = mc^2" />}Props
MathRenderer
| Prop | Type | Default | Description |
|---|---|---|---|
latex* | string | – | |
display | boolean | false (inline) | Centered display style. |
katex | KatexLike | – | Your KaTeX instance. Omit to import katex on demand. |
FormulaBlock
| Prop | Type | Default | Description |
|---|---|---|---|
latex* | string | – | |
title | ReactNode | – | |
description | ReactNode | – | |
variables | { symbol: string; meaning: ReactNode }[] | – | Legend of symbols: symbol is LaTeX. |
katex | KatexLike | – |
* required. Style props and HTML attributes are accepted as well.
Accessibility
- KaTeX output includes MathML for assistive technology.
Notes
- Pass your own instance with the
katexprop to skip the dynamic import.
Created by @indokudev