Create React component from string
MIT License
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>
// This will create a global function StringToReactComponent
import StringToReactComponent from 'string-to-react-component';
function App() {
return (
<StringToReactComponent>
{`(props)=>{
const [counter,setCounter]=React.useState(0); // by default your code has access to the React object
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 has access to the React
object and for using useState
, useEffect
, useRef
and ... you should get them from React
object or pass them as data
prop 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
required : No
data
object is passed to the component(which is generated from the string) as props
example :
import {useState} from 'react';
import StringToReactComponent from 'string-to-react-component';
function App() {
const [counter, setCounter] = useState(0);
const increase = () => {
setCounter(counter + 1);
};
return (
<StringToReactComponent data={{counter, increase}}>
{`(props)=>{
return (<>
<button onClick={props.increase}>+</button>
<span>{'counter : '+ props.counter}</span>
</>);
}`}
</StringToReactComponent>
);
}
object
No
{presets: ["react"],sourceMaps: "inline"}
<StringToReactComponent
babelOptions={{filename: 'counter.ts', presets: ['react', ['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>
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 test
MIT