string-to-react-component

Create React component from string

Demo

Online Demo

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

dev-javascript/string-to-react-component