website

source code for the ttmaths.uk website
Log | Files | Refs | README

LatexRenderer.jsx (770B)

      1 import { useEffect, useRef, useState } from 'preact/hooks';
      2 import Equation from '../components/Equation.jsx';
      3 import Card from '../components/Card.jsx'
      4 
      5 export default function LatexRenderer() {
      6   const [text, setText] = useState("")
      7   const textRef = useRef(null)
      8 
      9   function updateText(e) {
     10     setText(e.target.value)
     11   }
     12 
     13   useEffect(() => {
     14     textRef.current.addEventListener('input', updateText)
     15   })
     16 
     17   return (
     18     <Card title="LaTeX Renderer">
     19       <p>Render LaTeX code to the screen.</p>
     20       <textarea
     21         placeholder="LaTeX code here..."
     22         value={text}
     23         ref={textRef}
     24         onChange={e => updateText(e)}
     25         spellcheck={false}
     26       />
     27       <div class="print">
     28         <Equation equation={text} />
     29       </div>
     30     </Card>
     31   )
     32 }