How can KaTex be used in a React project? I read through documentation on NPM and still don't get it.

I don't quite see how katex.render and katex.renderToString can be applied to React.

How can KaTex be used in a React project? I read through documentation on NPM and still don't get it.

I don't quite see how katex.render and katex.renderToString can be applied to React.

• javascript
• reactjs
• npm
• katex

Share Improve this question Follow edited Feb 23, 2022 at 9:24 mkrieger1 23.6k77 gold badges6464 silver badges8282 bronze badges asked Feb 22, 2022 at 20:00 zmkmzmkm 14722 silver badges66 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

katex.render needs a DOM element to render in, you can get one with a useRef hook.

const KaTeXComponent = ({texExpression}) => {
    const containerRef = useRef();

    useEffect(() => {
        katex.render(texExpression, containerRef.current);
    }, [texExpression]);

    return <div ref={containerRef} />
}

This is a modified version of @Quentin code for React with TypeScript:

import katex from "katex";
import { useEffect, useRef } from "react";
import "katex/dist/katex.min.css";

function KaTeX({ texExpression, className }: { texExpression: string, className: string }) {
  const containerRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    katex.render(texExpression, containerRef.current as HTMLInputElement);
  }, [texExpression]);

  return <div ref={containerRef} className={className} />;
}

export default KaTeX;

And this is what you need for installation npm i katex @types/katex.