Create React component from string
Support react >=
v16.8.0
First You need to load @babel/standalone in the browser :
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>Then install string-to-react-component package
$ npm install string-to-react-component --saveimport 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 code inside the string 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 MyFirstComponent from 'path to MyFirstComponent';
import MySecondComponent from 'path to MySecondComponent';
function App() {
return (
<StringToReactComponent data={{MyFirstComponent, MySecondComponent}}>
{`(props)=>{
const {MyFirstComponent, MySecondComponent}=props;
return (<>
<MyFirstComponent/>
<MySecondComponent/>
</>);
}`}
</StringToReactComponent>
);
}- type : object
- not required
dataobject is passed to the component(which is generated from the string) as props
- type : object
- not required
- See the full option list here
example :
import StringToReactComponent from 'string-to-react-component';
function App() {
return (
<StringToReactComponent babelOptions={{filename: 'counter.js', sourceMaps: 'inline'}}>
{`(props)=>{
const {useState}=React;
const [counter,setCounter]=useState(0);
const increase=()=>{
setCounter(counter+1);
};
return (<>
<button onClick={increase}>+</button>
<span>{'counter : '+ counter}</span>
</>);
}`}
</StringToReactComponent>
);
}This plugin does not use eval function, however, suffers from security and might expose you to XSS attacks
To prevent XSS attacks, You should sanitize user input before storing it.
$ npm run testMIT