LaTeX React Component

A React component for rendering LaTeX equations using KaTeX. Supports inline and display math expressions with customizable delimiters.

📦 Installation

Install the required dependencies:

If you're using Next.js, make sure to import KaTeX's CSS in layout.js:

import "katex/dist/katex.min.css";

🚀 Usage

Basic Example

import React from "react";
import Latex from "./Latex";

export default function App() {
  return (
    <div>
      <h2>Math Example:</h2>
      <Latex>Here is an equation: $E = mc^2$</Latex>
    </div>
  );
}

Props

| Prop | Type | Default | Description | | ------------ | ------------------------ | ------------------ | ------------------------------------ | | children | string | "" | The LaTeX content to render. | | delimiters | Delimiter[] | Default delimiters | Custom delimiters for parsing LaTeX. | | strict | boolean | false | Enables strict mode for KaTeX. | | macros | Record<string, string> | {} | Custom macros for KaTeX. | | fallback | string | ⚠️ LaTeX Error | Fallback text if rendering fails. | | className | string | "" | Additional CSS class names. | | style | React.CSSProperties | {} | Custom styles for the component. |

Custom Delimiters

You can define your own delimiters:

<Latex delimiters={[{ left: "%%", right: "%%", display: true }]}>
  %% a^2 + b^2 = c^2 %%
</Latex>

🛠 Error Handling

If an equation fails to render, it logs an error and displays the fallback text. The error message is printed in the browser console for debugging.

⚡ Performance

• Uses useMemo to prevent unnecessary re-renders.
• Supports both inline and block LaTeX expressions.
• Efficiently parses and processes LaTeX content using regex-based splitting.

🎨 Styling

• The component applies the KaTeX styles automatically when imported.
• You can pass additional styles using the style prop.
• Custom CSS classes can be added using the className prop.

🔧 Advanced Usage

Using Macros

Define custom macros to simplify LaTeX expressions:

<Latex macros={{ "\\RR": "\\mathbb{R}" }}>$\RR$</Latex>

Strict Mode

Enabling strict mode ensures that only valid LaTeX expressions are rendered:

<Latex strict>$\notvalid$</Latex>

🚀 Future Improvements

• Add support for additional math environments.
• Improve error messages for easier debugging.
• Enhance SSR compatibility for Next.js applications.

📜 License

MIT License.