string-to-react-component
v3.1.0
Published
Create React component from string
Downloads
341
Maintainers
Readme
string-to-react-component
Create React component from string
Table of Contents
Installation
# with npm
$ npm install string-to-react-component @babel/standalone --save
# with yarn
yarn add string-to-react-component @babel/standalone
CDN Links
<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>
Basic Example
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>
);
}
Notes
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
react
package includinguseState
,useEffect
, ... are not accessible inside it and you can get them fromReact
global 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>
);
}
Using Unknown Elements
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>
);
}
props
data
- type : object
- not required
data
object is passed to the component(which is generated from the string) as props
babelOptions
- 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 :
Caveats
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.
Test
$ npm run test
License
MIT