A React component for rendering LaTeX TikZ diagrams using the TikZJax library.
DEMO LINK: https://react-tikzjax-demo.pages.dev/
npm install react-tikzjax
# or
yarn add react-tikzjaxImportant: This component relies on the TikZJax JavaScript library and fonts. You must include these resources in the <head> of your main index.html file (or equivalent HTML template):
<head>
<!-- Other head elements -->
<script src="https://tikzjax-demo.think.somethingorotherwhatever.com/tikzjax.js" defer></script>
</head>Failure to include these will result in errors, as the component calls the global window.process_tikz function provided by this library.
Here's a basic example of how to use the TikzJax component in your React application:
import React, { useState } from 'react';
import TikzJax from 'react-tikzjax';
function MyTikzComponent() {
// State to hold the TikZ commands (without \begin{tikzpicture})
const [tikzCommands, setTikzCommands] = useState('\\draw (0,0) circle (1in);');
// Construct the full TikZ environment code
const fullTikzCode = `\\begin{tikzpicture}
${tikzCommands}
\\end{tikzpicture}`;
return (
<div>
<h2>Edit TikZ Code:</h2>
<textarea
value={tikzCommands}
onChange={(e) => setTikzCommands(e.target.value)}
rows="6"
cols="50"
placeholder="e.g., \\draw (0,0) -- (1,1); \\node at (0.5, 0.5) {Hello};"
/>
<h2>Rendered Diagram:</h2>
{/* Pass the full TikZ code to the component */}
<TikzJax
content={fullTikzCode}
onError={(error) => {
console.error("TikZ rendering failed:", error);
// You could set state here to show an error message to the user
}}
/>
</div>
);
}
export default MyTikzComponent;| Prop | Type | Required | Description |
|---|---|---|---|
content |
string |
Yes | The complete TikZ code, including the \begin{tikzpicture} and \end{tikzpicture} (or \begin{tikzcd}/\end{tikzcd}) environment. Remember to escape backslashes (\\draw instead of \draw). |
onError |
func |
No | A callback function (error: Error) => void that is invoked if rendering fails. |
If you are contributing to or building this library from source:
- Ensure you have Node.js installed.
- Clone or download the library source code.
- Install dependencies:
npm install(oryarn install). - Build the library:
npm run build(oryarn build).- This uses Vite to bundle the library into the
dist/folder. - It produces
react-tikzjax.mjs(ES Module) andreact-tikzjax.umd.cjs(UMD) bundles, suitable for modern bundlers and direct browser usage, respectively.
- This uses Vite to bundle the library into the
An example project demonstrating usage is available. Refer to the project structure or documentation for setup instructions.
- Backslash Escaping: Because the
contentprop is a JavaScript string, you must escape backslashes. Use\\instead of\in your TikZ code strings. - Loading Order: Ensure the TikZJax scripts in your
index.htmlare loaded before theTikzJaxcomponent attempts to render for the first time. Usingdeferon the script tag usually handles this correctly. - Cleanup: The component handles the creation and cleanup of the necessary DOM
<script>elements internally. - Environments: While primarily designed for
tikzpicture, it should also work withtikzcdenvironments as long as the full code is passed via thecontentprop.