Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dev-javascript/string-to-react-component
Create React component from string
https://github.com/dev-javascript/string-to-react-component
jsx react string string-to-jsx string-to-react string-to-react-component
Last synced: 3 months ago
JSON representation
Create React component from string
- Host: GitHub
- URL: https://github.com/dev-javascript/string-to-react-component
- Owner: dev-javascript
- License: mit
- Created: 2022-05-22T23:42:15.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-17T01:50:37.000Z (5 months ago)
- Last Synced: 2024-10-06T06:32:09.182Z (4 months ago)
- Topics: jsx, react, string, string-to-jsx, string-to-react, string-to-react-component
- Language: JavaScript
- Homepage:
- Size: 3.27 MB
- Stars: 18
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# string-to-react-component
Create React component from string
[](https://codecov.io/gh/dev-javascript/string-to-react-component) [](http://npmjs.org/package/string-to-react-component) [](http://nodejs.org/download/) [](https://react.dev/) [](LICENSE) [](https://npmjs.org/package/string-to-react-component) [](https://travis-ci.org/ly-components/string-to-react-component)
## Demo
- [Online Demo](https://dev-javascript.github.io/string-to-react-component/)
## Table of Contents
- [Installation](#installation)
- [Basic Example](#basic-example)
- [Using Unknown Elements](#using-unknown-elements)
- [props](#props)
- [data](#data)
- [babelOptions](#babelOptions)
- [Caveats](#caveats)
- [Test](#test)
- [License](#license)
## Installation
```js
# with npm
$ npm install string-to-react-component @babel/standalone --save
# with yarn
yarn add string-to-react-component @babel/standalone
```
### CDN Links
```js
// This will create a global function StringToReactComponent
```
## Basic Example
```js
import StringToReactComponent from 'string-to-react-component';
function App() {
return (
{`(props)=>{
const [counter,setCounter]=React.useState(0); // by default your code has access to the React object
const increase=()=>{
setCounter(counter+1);
};
return (<>
+
{'counter : '+ counter}
>);
}`}
);
}
```
### 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:
```js
import {useState} from 'react';
import StringToReactComponent from 'string-to-react-component';
function App() {
return (
{`(props)=>{
console.log(typeof useState); // undefined
console.log(typeof React.useState); // function
console.log(typeof props.useState); // function
...
}`}
);
}
```
## Using Unknown Elements
```js
import StringToReactComponent from 'string-to-react-component';
import MyFirstComponent from 'path to MyFirstComponent';
import MySecondComponent from 'path to MySecondComponent';
function App() {
return (
{`(props)=>{
const {MyFirstComponent, MySecondComponent}=props;
return (<>
>);
}`}
);
}
```
## props
### data
- type : `object`
- required : `No`
- `data` object is passed to the component(which is generated from the string) as props
- example :
```js
import {useState} from 'react';
import StringToReactComponent from 'string-to-react-component';
function App() {
const [counter, setCounter] = useState(0);
const increase = () => {
setCounter(counter + 1);
};
return (
{`(props)=>{
return (<>
+
{'counter : '+ props.counter}
>);
}`}
);
}
```
### babelOptions
- type : `object`
- required : `No`
- default value : `{presets: ["react"],sourceMaps: "inline"}`
- See the full option list [here](https://babeljs.io/docs/en/options)
- examples :
- using typescript :
```js
{`()=>{
const [counter,setCounter]=React.useState(0);
const increase=()=>{
setCounter(counter+1);
};
return (<>
+
{'counter : '+ counter}
>);
}`}
```
## 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
```js
$ npm run test
```
## License
MIT