Create React component from string
# with npm
$ npm install string-to-react-component @babel/standalone --save
# with yarn
yarn add string-to-react-component @babel/standalone<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://unpkg.com/string-to-react-component@latest/dist/stringToReactComponent.umd.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 code inside the string is executed in the global scope, so imported objects from
reactpackage includinguseState,useEffect, ... are not accessible inside it and you can get them fromReactglobal variable or pass them as props to the component :
import {useState} from 'react';
import StringToReactComponent from 'string-to-react-component';
function App() {
return (
<StringToReactComponent data={{useState}}>
{`(props)=>{
console.log(typeof useState); // undefined
console.log(typeof React.useState); // function
console.log(typeof props.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
- examples :
- using source map :
<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>
- using typescript :
<StringToReactComponent babelOptions={{filename: 'counter.ts', presets: [['typescript', {allExtensions: true, isTSX: true}]]}}> {`()=>{ const [counter,setCounter]=React.useState<number>(0); const increase=()=>{ setCounter(counter+1); }; return (<> <button onClick={increase}>+</button> <span>{'counter : '+ counter}</span> </>); }`} </StringToReactComponent>
- using source map :
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