Maths

Renders a LaTeX string as maths with KaTeX, re-rendering only when the string changes.

@internote/canvas-sdk/reactComponent
On this page
import { Maths } from '@internote/canvas-sdk/react';

react-katex writes its output through dangerouslySetInnerHTML, so every render replaces a subtree of dozens of spans — the browser re-parses that HTML and lays it out again whether or not a character changed. An environment with a running animation renders every frame, which made every label on a plot and every reading in a footer a full typeset and relayout per frame.

Memoised on its source, so a formula that has not changed is not touched. Everything that sets maths goes through here. Notation that does not parse shows as the source text rather than an error.

#Props

Takes no className, style or id.

block
KaTeX's own DISPLAY MODE: a formula on a line of its own, centred.
boolean

Not the same thing as display, and the difference is not only layout. display sets \displaystyle on an inline formula, which grows the glyphs and puts limits over their operators — right for a reading in a footer, which has to sit in the row beside its label. Display mode is the mode itself, and some notation is admitted in no other: align* and the other alignment environments are refused inline, whatever \displaystyle says, so a body that aligns has to come through here.

childrenRequired
The LaTeX source.
string
display
Display-size glyphs — a reading standing out in a row — still set inline.
boolean

Declared in packages/canvas-sdk/src/react/math/Maths.tsx:55.

Last updated