react-autolatex

Auto-render LaTeX in React.

Based on KaTeX. TypeScript declaration supported.

Installation

npm install react-autolatex

Usage

Normal:

import 'katex/dist/katex.min.css';
import AutoLaTeX from 'react-autolatex';

export default () => {
  return (
    <AutoLaTeX>{'LaTeX string or HTML rich text with LaTeX like $c = \\pm\\sqrt{a^2 + b^2}$'}</AutoLaTeX>    
  );
};

With TypeScript:

import 'katex/dist/katex.min.css';
import AutoLaTeX, { RenderMathInElementOptions } from 'react-autolatex';

export default () => {
  const options: RenderMathInElementOptions = {
    delimiters: [
      { left: '$$', right: '$$', display: true },
      { left: '$', right: '$', display: false },
    ],
    errorCallback(msg: string, err: Error) {
      console.error('[Error]', msg, err);
    },
  };
  return (
    <AutoLaTeX options={options}>{'LaTeX string or HTML rich text with LaTeX like $c = \\pm\\sqrt{a^2 + b^2}$'}</AutoLaTeX>    
  );
};

Note: You may need to handle XSS before passing string to AutoLaTeX.

Props

| Name | Type | Default | Description | | --- | --- | --- | --- | | children | string, required | '' | The string content to render | | options | RenderMathInElementOptions | *see below | Render options (doc) | | className | string | '' | Class name for the container to render LaTeX | | style | React.CSSProperties | {} | Style for the container to render LaTeX |

options default:

{
  delimiters: [
    { left: "$$", right: "$$", display: true },
    { left: "\\[", right: "\\]", display: true },
    { left: "$", right: "$", display: false },
    { left: "\\(", right: "\\)", display: false },
  ],
}

License

MIT