Wrapping the mathjax-react expression

Question

I want to wrap the mathjax-react expression to the next line instead of adding the scroll. wordWrap:"break-word", is not working.

The expression:

  const example1 = String.raw`\text{A force } \overrightarrow{F} = (5\hat{i} + 3\hat{j} + 2\hat{k})N\text{ is applied over a particle which displaces it from its origin to the point }\\ \overrightarrow{R} = (2\hat{i} - \hat{j})m. \text{The work done on the particle in joules is:}`;

Using MathComponent from

  <p style={{display:"inline-block", whiteSpace:"nowrap", maxWidth:"100%", overflowX:"auto", textAlign:"initial"}}>
                  <MathComponent tex={example1} display={true} /></p>

Output: enter image description here

By adding wordWrap:"break-word" and removing overflowX and whiteSpace. enter image description here

By adding overflow:"hidden", and width:"100%" enter image description here

Answer 1

I used the mathjax scripts instead:

<script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: { inlineMath: [["$","$"],["\\(","\\)"]], displayMath:[["$$", "$$"], ["\\[","\\]"]] }, showMathMenu: false, messageStyle: "none" }); </script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" ></script>

declarations:

let node = React.createRef();
    useEffect(() => {
      renderMath();
    })

    const renderMath = () => {
      window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub, node.current])
    };

and render the content in the <p ref={node}> tag.