{"id":15785,"library":"react-latex-next","title":"Render LaTeX in React","description":"react-latex-next is a React component library designed for embedding and rendering LaTeX mathematical expressions within React applications. As of version 3.0.0, it leverages the high-performance KaTeX library to parse and display mathematical notation. The component automatically identifies LaTeX fragments within text using configurable delimiters, similar to KaTeX's auto-render extension, and renders them. While its release cadence is not fixed, it typically aligns with React ecosystem updates and bug fixes, maintaining compatibility with recent React versions. Key differentiators include its focus on straightforward React integration, support for custom KaTeX macros (with security considerations), and a default non-strict rendering mode that gracefully falls back to raw text on error, though a strict mode is available to throw errors. It requires explicit inclusion of KaTeX's CSS for correct styling.","status":"active","version":"3.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/harunurhan/react-latex-next","tags":["javascript","react","katex","latex","math"],"install":[{"cmd":"npm install react-latex-next","lang":"bash","label":"npm"},{"cmd":"yarn add react-latex-next","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-latex-next","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required by react-latex-next to function as a React component.","package":"react","optional":false},{"reason":"Peer dependency required for rendering React components in a DOM environment.","package":"react-dom","optional":false},{"reason":"The underlying library for LaTeX rendering. Its CSS is essential for correct styling, and the library is a direct dependency.","package":"katex","optional":false}],"imports":[{"note":"Primarily designed for ESM imports in modern React applications. CommonJS 'require' may lead to bundler issues or incorrect module resolution in some setups.","wrong":"const Latex = require('react-latex-next');","symbol":"Latex","correct":"import Latex from 'react-latex-next';"},{"note":"This CSS import is critical for the correct visual rendering of LaTeX. It must be included globally or within a component that is rendered. Without it, only raw text or misformatted equations will appear.","symbol":"KaTeX CSS","correct":"import 'katex/dist/katex.min.css';"},{"note":"While default delimiters are provided, custom delimiters for specific math environments should be passed via the `delimiters` prop as an array of objects.","wrong":"<Latex>{`$$...$$`}</Latex> // If you want custom delimiters without prop","symbol":"delimiters (prop)","correct":"<Latex delimiters={[{ left: '$$', right: '$$', display: true }]}>...</Latex>"}],"quickstart":{"code":"import React from 'react';\nimport 'katex/dist/katex.min.css';\nimport Latex from 'react-latex-next';\n\nfunction App() {\n  const latexContent = `We give illustrations for the {1 + 2} processes $e^+e^-$, gluon-gluon and $\\gamma\\gamma \\to W t\\bar b$. \n\nThis is a block equation: \n$$\\int_{-\\infty}^{\\infty} e^{-x^2} dx = \\sqrt{\\pi}$$\n\nHere is an inline equation: $(ax^2 + bx + c = 0)$.\n\nAnd a custom macro example: $\\\\f\\\\relax{x} = x$ is rendered using macros.`;\n\n  return (\n    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>\n      <h1>React LaTeX Example</h1>\n      <Latex\n        macros={{\n          \"\\\\f\": \"#1f(#2)\"\n        }}\n        strict={false}\n      >\n        {latexContent}\n      </Latex>\n      <p>This example demonstrates rendering inline and block LaTeX, and using custom macros. The KaTeX CSS is imported directly.</p>\n    </div>\n  );\n}\n\nexport default App;","lang":"typescript","description":"This quickstart demonstrates how to import the `Latex` component, include the necessary KaTeX CSS, and render both inline and display-mode LaTeX equations within a React functional component. It also shows how to define and use custom KaTeX macros via the `macros` prop and configures `strict` mode."},"warnings":[{"fix":"Ensure `import 'katex/dist/katex.min.css';` is present in your entry file or a relevant component. For Next.js, this typically goes into `_app.js` or directly into the component.","message":"The KaTeX CSS file (`katex/dist/katex.min.css`) must be explicitly imported or included in your project's bundle for LaTeX expressions to render correctly. Without it, equations may appear unstyled, misaligned, or as raw text.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Sanitize any user-provided input before using it to define KaTeX macros via the `macros` prop. Refer to the KaTeX API documentation for detailed security guidance on persistent macros.","message":"The `macros` prop allows defining custom KaTeX macros. Be aware that defining macros via `\\gdef` can have security implications, as mentioned in the KaTeX documentation. Arbitrary code execution can occur if untrusted input is used in macro definitions.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"To enable strict error handling, pass the `strict` prop to the `Latex` component: `<Latex strict>{textWithPotentiallyBrokenLatex}</Latex>`. This will cause rendering to fail and throw an error for invalid LaTeX.","message":"By default, `react-latex-next` renders in 'non-strict' mode, which means it will fall back to displaying the raw text (without delimiters) if a LaTeX parsing error occurs. If you prefer to throw a JavaScript error instead, you must enable `strict` mode.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Check the `peerDependencies` in `react-latex-next`'s `package.json` (e.g., `\"react\": \"^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0\"`) and upgrade or downgrade your `react` and `react-dom` packages accordingly.","message":"Major versions of `react-latex-next` may update their peer dependencies on `react` and `react-dom`. Ensure your project's React versions are compatible with the peer dependency ranges specified in `react-latex-next`'s `package.json` to avoid installation warnings or runtime issues.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"When writing LaTeX inside JavaScript strings, especially with template literals, always double-escape backslashes: `$`\\\\alpha`$`.","message":"Backslashes in LaTeX strings passed as children to the `Latex` component need to be escaped in JavaScript/JSX template literals. For example, `\\alpha` should be written as `\\\\alpha`.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Add `import 'katex/dist/katex.min.css';` to your application's entry point (e.g., `index.js`, `_app.js` in Next.js) or to the component where `Latex` is used.","cause":"The KaTeX CSS file (`katex/dist/katex.min.css`) has not been imported or included in the project's build.","error":"LaTeX expressions are not rendering; only showing raw text or unstyled symbols."},{"fix":"Either correct the LaTeX syntax within the string, or remove the `strict` prop (it defaults to `false`, which displays the raw text instead of throwing an error).","cause":"This error typically occurs when the `strict` prop is enabled on the `Latex` component, and the LaTeX string contains a parsing error (e.g., an undefined command, mismatched delimiters, or invalid syntax).","error":"Error: KaTeX parse error: LaTeX parse error: Undefined control sequence: \\xxx"},{"fix":"Ensure that the `children` prop passed to the `Latex` component is always a single string containing the LaTeX content. Concatenate multiple strings if necessary.","cause":"This error can occur if the `Latex` component receives an unexpected child type, such as an array of strings instead of a single string, or `null`/`undefined` children.","error":"Error: Cannot read properties of undefined (reading 'replace') at createHtml"}],"ecosystem":"npm"}