Interlacing Babel, Javascript & HTML

You may 'register' a Babel function or variable into the HTML document. After it is declared in Babel, use window["myFunctiom"]=myFunction to make it available. This will also expose it to Javascript.


A 'Run Again' button, placed in the HTML document, can be used to restart the animation by a call to a 'registered' function in Babel. Also the value in the 'Render Count' input text element is sent from Babel. The 'Is Render Running' value is filled via local Javascript function isRenderRunning().
      Render Count:       Is Render Running?:


React Root SVG Source:

Babel Script (code):
  1.     var randColor = function()
  2.     {
  3.         return '#'+Math.floor(Math.random()*16777215).toString(16);
  4.     }
  5.     //---create a React svg root element---
  6.     const svgRoot=ReactDOM.render(<svg id="mySVG" overflow="visible" xmlns="http://www.w3.org/2000/svg" />, svgDiv);
  7.  
  8.  
  9.     //---render in browser: six rect elements with property values---
  10.     ReactDOM.render(
  11.         <g> //---include as container---
  12.             <rect x={0}  y={0}  width={100}  height={100} fill={randColor()} />
  13.             <rect x={100}  y={0}  width={100}  height={100} fill={randColor()}  />
  14.             <rect x={200}  y={0}  width={100}  height={100} fill={randColor()}  />
  15.             <rect x={300}  y={0}  width={100}  height={100} fill={randColor()}  />
  16.             <rect x={400}  y={0}  width={100}  height={100} fill={randColor()}   />
  17.             <rect x={500}  y={0}  width={100}  height={100} fill={randColor()}  />
  18.         </g>
  19.         ,svgRoot
  20.     );
  21.  
  22.     //---Animate: change fill each  second---
  23.     var colorInterval=setInterval(changeColors,1000)
  24.  
  25. var intervalCnt=0
  26. var RenderRunning=false
  27. function changeColors()
  28. {
  29.  
  30.     ReactDOM.render(
  31.         <g>
  32.             <rect x={0}  y={0}  width={100}  height={100} fill={randColor()}  />
  33.             <rect x={100}  y={0}  width={100}  height={100} fill={randColor()}  />
  34.             <rect x={200}  y={0}  width={100}  height={100} fill={randColor()}  />
  35.             <rect x={300}  y={0}  width={100}  height={100} fill={randColor()}  />
  36.             <rect x={400}  y={0}  width={100}  height={100} fill={randColor()}  />
  37.             <rect x={500}  y={0}  width={100}  height={100} fill={randColor()}  />
  38.         </g>
  39.             ,svgRoot
  40.     );
  41.  
  42.     intervalCnt++
  43.     RenderRunning=true
  44.     renderCountValue.value=intervalCnt
  45.     showSourceSVG()
  46.     if(intervalCnt==5)
  47.     {
  48.      clearInterval(colorInterval);
  49.       runAgainButton.disabled=false
  50.       RenderRunning=false //---Javascript var---
  51.      }
  52.         isRenderRunning(RenderRunning) //---Javascript function---
  53.  
  54.  
  55. }
  56. //================a local Javascript function===============
  57. /*
  58.     function isRenderRunning(RenderRunning)
  59.     {
  60.       renderRunValue.value=RenderRunning //----from Babel---
  61.     }
  62. */
  63. //===============HTML/Javascript=============================
  64. //---Run Again button clicked---
  65. function runAgain()
  66. {
  67.   runAgainButton.disabled=true
  68.   intervalCnt=0
  69.   colorInterval=setInterval(changeColors,1000)
  70.  
  71. }
  72. //---'register' function for HTML---
  73. window["runAgain"]=runAgain
  74.  
  75.  
  76.  
  77.  
  78. //---local function to show svg source on page: React Root SVG Source---
  79. showSourceSVG()