56 |

react-mathjax-preview

57 |

58 | Enter some TeX, asciimath or MathML in the box below, or mix them all. 59 |

60 |

setMath(event.target.value)}
63 |         style={{ width: '100%', height: '150px' }}
64 |       />
65 |       <div>
66 |         <p>Configured delimiters:</p>
67 |         <ul>
68 |           <li>
69 |             TeX, inline mode: <code>$...$</code> or <code>$...$</code>
70 |           </li>
71 |           <li>
72 |             TeX, display mode: <code>\[...\]</code> or <code> $$...$$</code>
73 |           </li>
74 |           <li>
75 |             Asciimath: <code>`...`</code>.
76 |           </li>
77 |         </ul>
78 |       </div>
79 |       <ReactMathjaxPreview math={math} style={{ marginTop: '20px' }} />
80 |     </div>
81 |   )
82 | }
83 | 
84 | ReactDOM.render(<App />, document.getElementById('root'))

--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # react-mathjax-preview
  2 | 
  3 | [![Travis][build-badge]][build]
  4 | [![npm package][npm-badge]][npm]
  5 | 
  6 | `react-mathjax-preview` provides one React component to render MathML, TeX or ASCIImath formulas. See [demo](https://mehdisadeghi.github.io/react-mathjax-preview/).
  7 | 
  8 | ## Installation
  9 | Install `react-mathjax-preview` as a dependency:
 10 | 
 11 | ```
 12 | yarn add react-mathjax-preview
 13 | ```
 14 | 
 15 | ## Usage
 16 | Import the package and fill the `math` property with some text containing your formals. Wrap TeX in `$` or `$$` and ASCIImath in \`. Paste MathML as is.
 17 | 
 18 | ```js
 19 | import React, {Component} from 'react'
 20 | import {render} from 'react-dom'
 21 | import MathJax from 'react-mathjax-preview'
 22 | 
 23 | const asciimath = '`sum_(i=1)^n i^3=((n(n+1))/2)^2`' # Because of the backtick
 24 | const math = String.raw`
 25 |   <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
 26 |     <menclose notation="circle box">
 27 |       <mi> x </mi><mo> + </mo><mi> y </mi>
 28 |     </menclose>
 29 |   </math>
 30 | 
 31 |   $$\lim_{x \to \infty} \exp(-x) = 0$$
 32 | 
 33 |   ${asciimath}`
 34 | 
 35 | class Demo extends Component {
 36 |   constructor(props) {
 37 |     super(props);
 38 |     this.state = {
 39 |       math: tex
 40 |     }
 41 |   render() {
 42 |     return <MathJax math={this.state.math} />
 43 |   }
 44 | }
 45 | ```
 46 | 
 47 | ## Props
 48 | 
 49 | ### className
 50 | Wrapper classname
 51 | 
 52 | ### id
 53 | Wrapper id
 54 | 
 55 | ### style
 56 | Style object
 57 | 
 58 | ### wrapperTag
 59 | Wrapper tag, `"div"` is default
 60 | 
 61 | ### math
 62 | MathJax content
 63 | 
 64 | ### msDelayDisplay
 65 | Milliseconds to delay display of div, 300 is default
 66 | 
 67 | ### onDisplay (Function)
 68 | Triggered after delay and div is shown, hopefully typeset has finished
 69 | 
 70 | ### config (Object)
 71 | MathJax configuration
 72 | 
 73 | ### onLoad (Function)
 74 | Triggered after MathJax script finishes loading before children are allowed to render.
 75 | 
 76 | ### onError (Function)
 77 | Triggered when any Math Processing Error occurs
 78 | 
 79 | ### sanitizeOptions
 80 | DOMPurify configuration object (optional). See https://github.com/cure53/DOMPurify#can-i-configure-dompurify
 81 | 
 82 | ## Development
 83 | Clone the repo and run yarn commands available in the `package.json` file.
 84 | 
 85 | ```
 86 | $ git clone https://github.com/mehdisadeghi/react-mathjax-preview && cd react-mathjax-preview
 87 | $ yarn install // install dependencies
 88 | $ yarn start // start the development server which serves the demo page
 89 | $ yarn build // make a production build inside the dist folder
 90 | $ yarn build:demo // make a demo build inside the dist folder
 91 | ```
 92 | 
 93 | And browse to [localhost:3000](http://localhost:3000).
 94 | 
 95 | # License
 96 | MIT
 97 | 
 98 | [build-badge]: https://img.shields.io/travis/mehdisadeghi/react-mathjax-preview/master
 99 | [build]: https://travis-ci.org/mehdisadeghi/react-mathjax-preview
100 | 
101 | [npm-badge]: https://img.shields.io/npm/v/react-mathjax-preview
102 | [npm]: https://www.npmjs.org/package/react-mathjax-preview
103 | 
104 | [coveralls-badge]: https://img.shields.io/coveralls/mehdisadeghi/react-mathjax-preview/master
105 | [coveralls]: https://coveralls.io/github/mehdisadeghi/react-mathjax-preview
106 |

--------------------------------------------------------------------------------
/index.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState, useRef } from "react";
  2 | import PropTypes from "prop-types";
  3 | import DOMPurify from "dompurify";
  4 | 
  5 | const baseConfig = {
  6 |   showMathMenu: true,
  7 |   tex2jax: {
  8 |     inlineMath: [
  9 |       ["$", "$"],
 10 |       ["\$", "\$"],
 11 |     ],
 12 |   },
 13 |   skipStartupTypeset: true,
 14 | };
 15 | 
 16 | const defaultSanitizeOptions = {
 17 |   USE_PROFILES: {mathMl: true},
 18 |   ADD_ATTR: ['columnalign'],
 19 | }
 20 | 
 21 | const MathJaxPreview = React.forwardRef(({
 22 |   script,
 23 |   config,
 24 |   className,
 25 |   math,
 26 |   id,
 27 |   style,
 28 |   wrapperTag,
 29 |   msDelayDisplay, //milliseconds to delay display of div, 300 is default
 30 |   onDisplay,
 31 |   onLoad,
 32 |   onError,
 33 |   sanitizeOptions,
 34 | }, ref) => {
 35 |   const sanitizedMath = DOMPurify.sanitize(math, {...defaultSanitizeOptions, ...sanitizeOptions});
 36 |   const previewRef = useRef();
 37 |   const [display, setDisplay] = useState("none"); //prevent display during processing
 38 |   const [loadingState, setLoadingState] = useState(
 39 |     window.MathJax ? "loaded" : "loading"
 40 |   );
 41 | 
 42 |   useEffect(() => {
 43 |     let mathjaxScriptTag = document.querySelector(`script[src="${script}"]`);
 44 |     if (!mathjaxScriptTag) {
 45 |       mathjaxScriptTag = document.createElement("script");
 46 |       mathjaxScriptTag.async = true;
 47 |       mathjaxScriptTag.src = script;
 48 | 
 49 |       for (const [k, v] of Object.entries(config || {})) {
 50 |         mathjaxScriptTag.setAttribute(k, v);
 51 |       }
 52 |       const node = document.head || document.getElementsByTagName("head")[0];
 53 |       node.appendChild(mathjaxScriptTag);
 54 |     }
 55 |     const onloadHandler = () => {
 56 |       setLoadingState("loaded");
 57 |       window.MathJax.Hub.Config({ ...baseConfig, ...config });
 58 |       onLoad && onLoad();
 59 |     };
 60 |     const onerrorHandler = () => {
 61 |       setLoadingState("failed");
 62 |       onError && onError();
 63 |     };
 64 | 
 65 |     mathjaxScriptTag.addEventListener("load", onloadHandler);
 66 |     mathjaxScriptTag.addEventListener("error", onerrorHandler);
 67 | 
 68 |     return () => {
 69 |       mathjaxScriptTag.removeEventListener("load", onloadHandler);
 70 |       mathjaxScriptTag.removeEventListener("error", onloadHandler);
 71 |     };
 72 |   }, [setLoadingState, config, baseConfig]);
 73 | 
 74 |   useEffect(() => {
 75 |     if (loadingState !== "loaded") {
 76 |       return;
 77 |     }
 78 |     previewRef.current.innerHTML = sanitizedMath;
 79 |     window.MathJax.Hub.Queue([
 80 |       "Typeset",
 81 |       window.MathJax.Hub,
 82 |       previewRef.current,
 83 |     ]);
 84 | 
 85 |     //delay display of div
 86 |     var msDelay;
 87 |     if ( //msDelayDisplay prop is a reasonable number of ms
 88 |       msDelayDisplay !== null &&
 89 |       !isNaN(+msDelayDisplay) &&
 90 |       +msDelayDisplay >= 0 &&
 91 |       +msDelayDisplay < 10000
 92 |     ) {
 93 |       msDelay = +msDelayDisplay;
 94 |     } else {
 95 |       msDelay = 300; // default 300ms delay
 96 |     }
 97 |     const timeout = setTimeout(() => {
 98 |       setDisplay("inline"); //display div after delay, hopefully typeset has finished
 99 |       onDisplay && onDisplay();
100 |     }, msDelay);
101 | 
102 |     return () => {
103 |       setDisplay("none");
104 |       clearTimeout(timeout);
105 |     };
106 |   }, [sanitizedMath, loadingState, previewRef]);
107 | 
108 |   return React.createElement(
109 |     wrapperTag,
110 |     { className, id, style: { display, ...style }, ref },
111 |     <>
112 |       {loadingState === "failed" && <span>fail loading mathjax lib</span>}
113 |       {React.createElement(wrapperTag, {
114 |         className: "react-mathjax-preview-result",
115 |         ref: previewRef,
116 |       })}
117 |     </>
118 |   );
119 | });
120 | 
121 | MathJaxPreview.displayName = 'MathJaxPreview';
122 | 
123 | MathJaxPreview.propTypes = {
124 |   script: PropTypes.string,
125 |   config: PropTypes.object,
126 |   className: PropTypes.string,
127 |   math: PropTypes.string,
128 |   style: PropTypes.object,
129 |   wrapperTag: PropTypes.string,
130 |   id: PropTypes.string,
131 |   onLoad: PropTypes.func,
132 |   onError: PropTypes.func,
133 |   onDisplay: PropTypes.func,
134 |   sanitizeOptions: PropTypes.object,
135 | };
136 | 
137 | MathJaxPreview.defaultProps = {
138 |   script:
139 |     "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js?config=TeX-MML-AM_HTMLorMML",
140 |   id: "react-mathjax-preview",
141 |   sanitizeOptions: {},
142 |   wrapperTag: "div",
143 | };
144 | 
145 | export default MathJaxPreview;
146 |

--------------------------------------------------------------------------------