{"_id":"@dawsonxiong/react-native-latex-renderer","name":"@dawsonxiong/react-native-latex-renderer","dist-tags":{"latest":"2.0.0"},"versions":{"2.0.0":{"name":"@dawsonxiong/react-native-latex-renderer","version":"2.0.0","description":"A LaTeX renderer for React Native with native SVG rendering (MathJax) and WebView rendering (KaTeX).","main":"./lib/module/index.js","types":"./lib/typescript/src/index.d.ts","exports":{".":{"source":"./src/index.tsx","types":"./lib/typescript/src/index.d.ts","default":"./lib/module/index.js"},"./package.json":"./package.json"},"scripts":{"example":"yarn workspace react-native-latex-example","test":"jest","typecheck":"tsc","lint":"eslint \"**/*.{js,ts,tsx}\"","clean":"del-cli lib","prepare":"bob build","release":"release-it --only-version"},"keywords":["react-native-latex-renderer","react-native","react-native-katex","react-native-latex","react-native-math","react-native-math-renderer","react-native-svg","mathjax","ios","android","latex","katex","math","mathematics","formula","equation","renderer","svg","native","webview","autoheight","typesetting"],"repository":{"type":"git","url":"git+https://github.com/dawsonxiong/react-native-LaTeX-renderer.git"},"author":{"name":"dawsonxiong","url":"https://github.com/dawsonxiong"},"license":"MIT","bugs":{"url":"https://github.com/dawsonxiong/react-native-LaTeX-renderer/issues"},"homepage":"https://github.com/dawsonxiong/react-native-LaTeX-renderer#readme","publishConfig":{"registry":"https://registry.npmjs.org/","access":"public"},"devDependencies":{"@commitlint/config-conventional":"^19.8.1","@eslint/compat":"^1.3.2","@eslint/eslintrc":"^3.3.1","@eslint/js":"^9.35.0","@evilmartians/lefthook":"^1.12.3","@react-native/babel-preset":"0.81.1","@react-native/eslint-config":"^0.81.1","@release-it/conventional-changelog":"^10.0.1","@types/jest":"^29.5.14","@types/react":"^19.1.12","@typescript-eslint/eslint-plugin":"^8.43.0","@typescript-eslint/parser":"^8.43.0","commitlint":"^19.8.1","del-cli":"^6.0.0","eslint":"^9.35.0","eslint-config-prettier":"^10.1.8","eslint-plugin-jest":"^29.0.1","eslint-plugin-prettier":"^5.5.4","eslint-plugin-react-native":"^5.0.0","jest":"^29.7.0","prettier":"^3.6.2","react":"*","react-native":"*","react-native-builder-bob":"^0.40.13","react-native-svg":"^15.15.3","react-native-webview":"*","release-it":"^19.0.4","typescript":"^5.9.2"},"dependencies":{"katex":"^0.16.22","mathjax-full":"^3.2.2"},"peerDependencies":{"react":"*","react-native":"*","react-native-svg":"*","react-native-webview":"*"},"peerDependenciesMeta":{"react-native-svg":{"optional":true},"react-native-webview":{"optional":true}},"workspaces":["example"],"packageManager":"yarn@3.6.1","jest":{"preset":"react-native","modulePathIgnorePatterns":["<rootDir>/example/node_modules","<rootDir>/lib/"]},"commitlint":{"extends":["@commitlint/config-conventional"]},"release-it":{"git":{"commitMessage":"chore: release ${version}","tagName":"v${version}"},"npm":{"publish":true},"github":{"release":true},"plugins":{"@release-it/conventional-changelog":{"preset":{"name":"angular"}}}},"prettier":{"quoteProps":"consistent","singleQuote":true,"tabWidth":2,"trailingComma":"es5","useTabs":false},"react-native-builder-bob":{"source":"src","output":"lib","targets":[["module",{"esm":true}],["typescript",{"project":"tsconfig.build.json"}]]},"create-react-native-library":{"languages":"js","type":"library","version":"0.54.3"},"_id":"@dawsonxiong/react-native-latex-renderer@2.0.0","gitHead":"ec333a258b7931518d965d13ab908f08a91f2a21","_nodeVersion":"23.1.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-ATrEcL/o6BnaKfmxY1M9ZXhLFMhvZNYpeI5X33g1T+JGJEm7hd8P74bwaD1SX2LUp7CkLVPALoDYB7QOieE7vQ==","shasum":"b0a7ad9264b42d22ae9b54b30258b20aaf238d7b","tarball":"https://registry.npmjs.org/@dawsonxiong/react-native-latex-renderer/-/react-native-latex-renderer-2.0.0.tgz","fileCount":35,"unpackedSize":71735,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIQCV7HiIzdwRLOtKO45PPsuvHDYUcFBeNq2pyhyP1SanpgIfZ+emVnaWU64rarl80LZj4GLb2qDBfFN96Pi0n3Emqw=="}]},"_npmUser":{"name":"dawsonxiong","email":"dawsonxiong@gmail.com"},"directories":{},"maintainers":[{"name":"dawsonxiong","email":"dawsonxiong@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-latex-renderer_2.0.0_1773216928598_0.06634461968365546"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-11T08:15:28.497Z","2.0.0":"2026-03-11T08:15:28.743Z","modified":"2026-03-11T08:15:28.982Z"},"maintainers":[{"name":"dawsonxiong","email":"dawsonxiong@gmail.com"}],"description":"A LaTeX renderer for React Native with native SVG rendering (MathJax) and WebView rendering (KaTeX).","homepage":"https://github.com/dawsonxiong/react-native-LaTeX-renderer#readme","keywords":["react-native-latex-renderer","react-native","react-native-katex","react-native-latex","react-native-math","react-native-math-renderer","react-native-svg","mathjax","ios","android","latex","katex","math","mathematics","formula","equation","renderer","svg","native","webview","autoheight","typesetting"],"repository":{"type":"git","url":"git+https://github.com/dawsonxiong/react-native-LaTeX-renderer.git"},"author":{"name":"dawsonxiong","url":"https://github.com/dawsonxiong"},"bugs":{"url":"https://github.com/dawsonxiong/react-native-LaTeX-renderer/issues"},"license":"MIT","readme":"# React Native LaTeX Renderer\n\nA LaTeX renderer for React Native with two rendering modes:\n\n- **`MathView`** (Native SVG) — Renders LaTeX as native SVG using MathJax. No WebView, no network requests, sub-millisecond rendering.\n- **`KaTeXAutoHeightWebView`** (WebView) — Renders LaTeX in an auto-resizing WebView using KaTeX.\n\n<p align=\"center\">\n  <img src=\"assets/latex.png\" alt=\"MathView Example\" width=\"300\" />\n</p>\n\n## Features\n\n- **Native SVG rendering**: `MathView` converts LaTeX to SVG paths — no WebView overhead, no font loading delay, works fully offline\n- **Mixed content**: Inline math and display math in the same string, interleaved with plain text\n- **WebView option**: `KaTeXAutoHeightWebView` for full HTML/CSS styling control (requires network for KaTeX font CSS on first load)\n- **All standard delimiters**: `$...$`, `$$...$$`, `\\(...\\)`, `\\[...\\]`\n- **TypeScript**: Fully typed API\n\n## Installation\n\n```sh\nnpm install @dawsonxiong/react-native-latex-renderer\n```\n\n### Peer dependencies\n\nInstall the peer dependencies you need based on which components you use:\n\n```sh\n# For MathView (native SVG)\nnpm install react-native-svg\n\n# For KaTeXAutoHeightWebView (WebView)\nnpm install react-native-webview\n```\n\nBoth are optional — install only what you need.\n\n## Usage\n\n### MathView (Native SVG — recommended)\n\nRenders LaTeX as native SVG components. No WebView, near-instant rendering.\n\n```tsx\nimport { MathView } from '@dawsonxiong/react-native-latex-renderer';\n\n// Mixed text + inline math\n<MathView math=\"Einstein showed $E = mc^2$ and the field equation: $$R_{\\mu\\nu} = 0$$\" />\n\n// Styling\n<MathView\n  math=\"$$\\int_0^\\infty e^{-x^2} dx = \\frac{\\sqrt{\\pi}}{2}$$\"\n  fontSize={20}\n  color=\"blue\"\n/>\n\n// Error handling\n<MathView\n  math=\"$\\frac{1}{2}$\"\n  onError={(error, latex) => console.warn(`Failed to render: ${latex}`, error)}\n/>\n```\n\n### KaTeXAutoHeightWebView (WebView)\n\nRenders LaTeX inside a WebView with auto-resizing. Supports full HTML/CSS styling.\n\n```tsx\nimport { KaTeXAutoHeightWebView, createKaTeXHTML } from '@dawsonxiong/react-native-latex-renderer';\n\nconst html = createKaTeXHTML(\n  'This is a test: $$E = mc^2$$',\n  { 'font-size': '18px', 'color': 'black' },  // container styles\n  { 'color': 'blue' }                           // LaTeX styles\n);\n\n<KaTeXAutoHeightWebView\n  source={html}\n  onHeightChange={(height) => console.log('Height:', height)}\n/>\n```\n\n## API Reference\n\n### `MathView`\n\n\n| Prop       | Type                                    | Default   | Description                                                |\n| ---------- | --------------------------------------- | --------- | ---------------------------------------------------------- |\n| `math`     | `string`                                | —         | Text with LaTeX delimiters (`$`, `$$`, `\\(`, `\\[`).        |\n| `fontSize` | `number`                                | `16`      | Base font size in pixels.                                  |\n| `color`    | `string`                                | `'black'` | Text and math color.                                       |\n| `style`    | `ViewStyle`                             | —         | Container style.                                           |\n| `onError`  | `(error: Error, latex: string) => void` | —         | Called when a LaTeX segment fails to render.               |\n| `debug`    | `boolean`                               | `false`   | Show colored borders around segments for layout debugging. |\n\n\n### `createKaTeXHTML(content, containerStyles?, latexStyles?)`\n\nGenerates the HTML source string for the WebView.\n\n\n| Parameter         | Type     | Description                               |\n| ----------------- | -------- | ----------------------------------------- |\n| `content`         | `string` | Text content containing LaTeX delimiters. |\n| `containerStyles` | `object` | CSS styles for the HTML container.        |\n| `latexStyles`     | `object` | CSS styles applied to KaTeX elements.     |\n\n\n### `KaTeXAutoHeightWebView`\n\n\n| Prop             | Type                       | Default | Description                           |\n| ---------------- | -------------------------- | ------- | ------------------------------------- |\n| `source`         | `string`                   | —       | HTML string from `createKaTeXHTML`.   |\n| `onHeightChange` | `(height: number) => void` | —       | Callback when content height changes. |\n| `minHeight`      | `number`                   | `50`    | Minimum WebView height.               |\n| `containerStyle` | `object`                   | —       | Outer React Native View style.        |\n| `...props`       | `WebViewProps`             | —       | Any `react-native-webview` props.     |\n\n\n### `parseLatex(content)`\n\nLow-level utility that parses a string into structured segments.\n\n```ts\nimport { parseLatex } from '@dawsonxiong/react-native-latex-renderer';\n\nparseLatex('Hello $x^2$ world');\n// [\n//   { type: 'text', content: 'Hello ' },\n//   { type: 'math', content: 'x^2', display: false },\n//   { type: 'text', content: ' world' },\n// ]\n```\n\n## Delimiters\n\n\n| Delimiter | Mode    | Example                                         |\n| --------- | ------- | ----------------------------------------------- |\n| `$...$`   | Inline  | `$E = mc^2$` renders inline with text           |\n| `$$...$$` | Display | `$$E = mc^2$$` renders centered on its own line |\n| `\\(...\\)` | Inline  | `\\(E = mc^2\\)` same as `$...$`                  |\n| `\\[...\\]` | Display | `\\[E = mc^2\\]` same as `$$...$$`                |\n\n\n## Contributing\n\n- [Development workflow](CONTRIBUTING.md#development-workflow)\n- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)\n- [Code of conduct](CODE_OF_CONDUCT.md)\n\n## License\n\nMIT","readmeFilename":"README.md","_rev":"1-a397d5242e5bf495fd7abdf8aec41a6e"}