string-to-react-component

Dynamically create and render React components from strings at runtime, converting strings to React components for flexible UI generation

Demo

• Online Demo

Table of Contents

• Installation
• Basic Example
• Using Unknown Elements
• props
  • data
  • babelOptions
• Caveats
• Test
• License

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 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>
    );
  }

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 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>
    );
  }

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>

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