README
@cutting/use-mathjax
React components <MathJax />
, <SVGMathJax>
and a useMathJax
hook to easily load MathJax version 3 Tex content.
A real working demo is here which is why I wrote this component.
install
pnpm add @cutting/use-mathjax
MathJax components
Probably the easiest way to use use-mathjax
is to use either the <MathJax/>
component or the <SVGMathJax>
component.
MathJax
<MathJax/>
is for rendering mathjax expressions into plain old HTML.
import { MathJax, MathJaxProvider } from '@cutting/use-mathjax';
const Maths = () => {
return (
<>
<MathJax expr={`$\\int x^2dx$`} />
<MathJax expr={`$\\frac{5\\pi}4$`} />
<MathJax expr={`$\\frac{3\\pi}2$`} />
</>
)
}
export const App: FC = () => {
return (
<StrictMode>
<MathJaxProvider>
<Maths />
</MathJaxProvider>
</StrictMode>
);
};
SVGMathJax
<SVGMathJax>
is for rendering mathjax into an existing svg component.
import { MathJax, MathJaxProvider } from '@cutting/use-mathjax';
const Maths = () => {
return (
<svg preserveAspectRatio="xMaxYMid meet" viewBox="0 0 960 654" style="overflow: visible;">
{[
{ value: Math.PI / 4, label: '$\\frac{\\pi}4