{"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.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-latex-next"],"cli":null},"imports":["import Latex from 'react-latex-next';","import 'katex/dist/katex.min.css';","<Latex delimiters={[{ left: '$$', right: '$$', display: true }]}>...</Latex>"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}