React global variable should be create

inside the component

Author: dev-javascript

src/ctx.js

@@ -1,8 +1,9 @@
 class Ctx {
-  constructor() {
+  constructor(React) {
     this._temp = '';
     this._parentTemp = `"use strict";\nreturn @temp;`;
     this._com = null;
+    window.React = window.React || React;
     if (!(Object.prototype.hasOwnProperty.call(window, 'Babel') && typeof window.Babel === 'object')) {
       throw new Error(`string-to-react-component package needs @babel/standalone for working correctly.
       you should load @babel/standalone in the browser.`);

src/index.js

@@ -1,4 +1,4 @@
 import Ctx from './ctx.js';
 import StringToReact from './strintToReact.js';
-const getCtx = () => new Ctx();
+const getCtx = (options) => new Ctx(options);
 export default StringToReact.bind(null, {getCtx});

src/strintToReact.js

@@ -1,11 +1,8 @@
-import React, {useRef} from 'react';
+import React, {useRef } from 'react';
 import PropTypes from 'prop-types';
-window.React = window.React || React;
 function StringToReactComponent({getCtx}, props) {
   const ref = useRef(null);
-  if (!ref.current) {
-    ref.current = getCtx();
-  }
+  ref.current = ref.current || getCtx(React);
   const babelOptions = props.babelOptions || {};
   const GeneratedComponent = ref.current.updateTemplate(props.children, babelOptions).getComponent();
   const data = props.data || {};