Create React component from string
Support react >=
v16.8.0
$ npm install string-to-react-component --saveAlso You need to load @babel/standalone in the browser :
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>import StringToReactComponent from 'string-to-react-component';
function App() {
return (
<StringToReactComponent>
{`(props)=>{
const {useState}=React;
const [counter,setCounter]=useState(0);
const increase=()=>{
setCounter(counter+1);
};
return (<>
<button onClick={increase}>+</button>
<span>{'counter : '+ counter}</span>
</>);
}`}
</StringToReactComponent>
);
}-
The given code inside the string should be a function.
-
The given code is executed in the global scope, so imported objects from
reactpackage includinguseState,useEffect, ... are not accessible inside it and you should get them fromReactglobal variable :
import {useState} from 'react';
import StringToReactComponent from 'string-to-react-component';
function App() {
return (
<StringToReactComponent>
{`()=>{
console.log(typeof useState); // undefined
console.log(typeof React.useState); // function
...
}`}
</StringToReactComponent>
);
}import StringToReactComponent from 'string-to-react-component';
import MyComponent from 'path to MyComponent';
function App() {
return (
<StringToReactComponent MyComponent={MyComponent}>
{`(props)=>{
const {MyComponent}=props;
return (<MyComponent/>);
}`}
</StringToReactComponent>
);
}$ npm run testMIT