string-to-react-component
v4.0.0
Published
Create React component from string
Downloads
2,768
Maintainers
Readme
string-to-react-component
Create React component from string
Demo
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>
// This will create a global function StringToReactComponent
Basic Example
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>
);
}
Notes
The given code inside the string should be a function.
The code inside the string has access to the
React
object and for usinguseState
,useEffect
,useRef
and ... you should get them fromReact
object or pass them asdata
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> ); }
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
required :
No
data
object is passed to the component(which is generated from the string) as propsexample :
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> ); }
babelOptions
- type :
object
- required :
No
- default value :
{presets: ["react"],sourceMaps: "inline"}
- See the full option list here
- examples :
- using typescript :
<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>
- using typescript :
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