Registry / web-framework / react-latex-next

react-latex-next

library3.0.0jsnpmunverified

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.

web-framework

npm install react-latex-next

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-LATEX-NEXT

react-latex-next

web-frameworkjavascriptv3.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Latex

✓ import Latex from 'react-latex-next';

✗ const Latex = require('react-latex-next');

Primarily designed for ESM imports in modern React applications. CommonJS 'require' may lead to bundler issues or incorrect module resolution in some setups.

KaTeX CSS

✓ import 'katex/dist/katex.min.css';

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.

delimiters (prop)

✓ <Latex delimiters={[{ left: '$$', right: '$$', display: true }]}>...</Latex>

✗ <Latex>{`$$...$$`}</Latex> // If you want custom delimiters without prop

While default delimiters are provided, custom delimiters for specific math environments should be passed via the `delimiters` prop as an array of objects.

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.

import React from 'react'; import 'katex/dist/katex.min.css'; import Latex from 'react-latex-next'; function App() { const latexContent = `We give illustrations for the {1 + 2} processes $e^+e^-$, gluon-gluon and $\gamma\gamma \to W t\bar b$. This is a block equation: $$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$ Here is an inline equation: $(ax^2 + bx + c = 0)$. And a custom macro example: $\\f\\relax{x} = x$ is rendered using macros.`; return ( <div style={{ padding: '20px', fontFamily: 'sans-serif' }}> <h1>React LaTeX Example</h1> <Latex macros={{ "\\f": "#1f(#2)" }} strict={false} > {latexContent} </Latex> <p>This example demonstrates rendering inline and block LaTeX, and using custom macros. The KaTeX CSS is imported directly.</p> </div> ); } export default App;

Debug

Known issues

gotchaThe 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.

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.

affects: >=1.0.0

gotchaThe `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.

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.

affects: >=1.0.0

gotchaBy 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.

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.

affects: >=1.0.0

breakingMajor 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.

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.

affects: >=3.0.0

gotchaBackslashes 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`.

fix

When writing LaTeX inside JavaScript strings, especially with template literals, always double-escape backslashes: `$`\\alpha`$`.

affects: >=1.0.0

Errors

Common errors & fixes

LaTeX expressions are not rendering; only showing raw text or unstyled symbols.

The KaTeX CSS file (`katex/dist/katex.min.css`) has not been imported or included in the project's build.

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.

Error: KaTeX parse error: LaTeX parse error: Undefined control sequence: \xxx

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).

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).

Error: Cannot read properties of undefined (reading 'replace') at createHtml

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.

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.

Upgrade

Version history

3.0.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency required by react-latex-next to function as a React component.

react-domrequiredPeer dependency required for rendering React components in a DOM environment.

katexrequiredThe underlying library for LaTeX rendering. Its CSS is essential for correct styling, and the library is a direct dependency.

Agent activity

8 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/harunurhan/react-latex-next ↗

packagehttps://www.npmjs.com/package/react-latex-next ↗

homepagehttps://react-latex.netlify.app/ ↗