{"id":14971596,"url":"https://github.com/dev-javascript/string-to-react-component","last_synced_at":"2025-06-26T06:33:07.686Z","repository":{"id":57689407,"uuid":"495203203","full_name":"dev-javascript/string-to-react-component","owner":"dev-javascript","description":"Create React component from string","archived":false,"fork":false,"pushed_at":"2025-03-22T18:35:17.000Z","size":3439,"stargazers_count":30,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-19T01:46:52.853Z","etag":null,"topics":["jsx","react","string","string-to-jsx","string-to-react","string-to-react-component"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dev-javascript.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-05-22T23:42:15.000Z","updated_at":"2025-05-26T08:51:41.000Z","dependencies_parsed_at":"2024-06-28T14:10:48.914Z","dependency_job_id":"a3878df1-63fd-40d1-ba22-303143e5e497","html_url":"https://github.com/dev-javascript/string-to-react-component","commit_stats":{"total_commits":84,"total_committers":1,"mean_commits":84.0,"dds":0.0,"last_synced_commit":"31669273ac2e8e9052e7713c45f2183be2d6281c"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/dev-javascript/string-to-react-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-javascript%2Fstring-to-react-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-javascript%2Fstring-to-react-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-javascript%2Fstring-to-react-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-javascript%2Fstring-to-react-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dev-javascript","download_url":"https://codeload.github.com/dev-javascript/string-to-react-component/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-javascript%2Fstring-to-react-component/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262014741,"owners_count":23245194,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jsx","react","string","string-to-jsx","string-to-react","string-to-react-component"],"created_at":"2024-09-24T13:45:31.407Z","updated_at":"2025-06-26T06:33:07.677Z","avatar_url":"https://github.com/dev-javascript.png","language":"JavaScript","readme":"# string-to-react-component\n\nDynamically create and render React components from strings at runtime, converting strings to React components for flexible UI generation\n\n[![Test coverage](https://codecov.io/gh/dev-javascript/string-to-react-component/graph/badge.svg?token=GT1LU074L2)](https://codecov.io/gh/dev-javascript/string-to-react-component) [![NPM version](https://img.shields.io/npm/v/string-to-react-component.svg?style=flat-square)](http://npmjs.org/package/string-to-react-component) [![node](https://img.shields.io/badge/node.js-%3E=_8.0-green.svg?style=flat-square)](http://nodejs.org/download/) [![React](https://img.shields.io/badge/React-%3E=_16.8.0-green.svg?style=flat-square)](https://react.dev/) [![License](https://img.shields.io/npm/l/string-to-react-component.svg?style=flat-square)](LICENSE) [![npm download](https://img.shields.io/npm/dm/string-to-react-component.svg?style=flat-square)](https://npmjs.org/package/string-to-react-component) [![Build Status](https://travis-ci.org/ly-components/string-to-react-component.png)](https://travis-ci.org/ly-components/string-to-react-component)\n\n## Demo\n\n- [Online Demo](https://dev-javascript.github.io/string-to-react-component/)\n\n## Table of Contents\n\n\u003c!-- toc --\u003e\n\n- [Installation](#installation)\n- [Basic Example](#basic-example)\n- [Using Unknown Elements](#using-unknown-elements)\n- [props](#props)\n  - [data](#data)\n  - [babelOptions](#babelOptions)\n- [Caveats](#caveats)\n- [Test](#test)\n- [License](#license)\n\n\u003c!-- tocstop --\u003e\n\n## Installation\n\n```js\n# with npm\n$ npm install string-to-react-component @babel/standalone --save\n\n# with yarn\nyarn add string-to-react-component @babel/standalone\n```\n\n### CDN Links\n\n```js\n\u003cscript src=\"https://unpkg.com/@babel/standalone/babel.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/string-to-react-component@latest/dist/stringToReactComponent.umd.min.js\"\u003e\u003c/script\u003e\n// This will create a global function StringToReactComponent\n```\n\n## Basic Example\n\n```js\nimport StringToReactComponent from 'string-to-react-component';\nfunction App() {\n  return (\n    \u003cStringToReactComponent\u003e\n      {`(props)=\u003e{\n         const [counter,setCounter]=React.useState(0); // by default your code has access to the React object\n         const increase=()=\u003e{\n           setCounter(counter+1);\n         };\n         return (\u003c\u003e\n           \u003cbutton onClick={increase}\u003e+\u003c/button\u003e\n           \u003cspan\u003e{'counter : '+ counter}\u003c/span\u003e\n           \u003c/\u003e);\n       }`}\n    \u003c/StringToReactComponent\u003e\n  );\n}\n```\n\n### Notes\n\n- The given code inside the string should be a function.\n\n- 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:\n\n  ```js\n  import {useState} from 'react';\n  import StringToReactComponent from 'string-to-react-component';\n  function App() {\n    return (\n      \u003cStringToReactComponent data={{useState}}\u003e\n        {`(props)=\u003e{\n           console.log(typeof useState); // undefined\n           console.log(typeof React.useState); // function\n           console.log(typeof props.useState); // function\n           ...\n  \n         }`}\n      \u003c/StringToReactComponent\u003e\n    );\n  }\n  ```\n\n## Using Unknown Elements\n\n```js\nimport StringToReactComponent from 'string-to-react-component';\nimport MyFirstComponent from 'path to MyFirstComponent';\nimport MySecondComponent from 'path to MySecondComponent';\nfunction App() {\n  return (\n    \u003cStringToReactComponent data={{MyFirstComponent, MySecondComponent}}\u003e\n      {`(props)=\u003e{\n         const {MyFirstComponent, MySecondComponent}=props;\n         return (\u003c\u003e\n          \u003cMyFirstComponent/\u003e\n          \u003cMySecondComponent/\u003e\n         \u003c/\u003e);\n       }`}\n    \u003c/StringToReactComponent\u003e\n  );\n}\n```\n\n## props\n\n### data\n\n- type : `object`\n- required : `No`\n- `data` object is passed to the component(which is generated from the string) as props\n- example :\n\n  ```js\n  import {useState} from 'react';\n  import StringToReactComponent from 'string-to-react-component';\n  function App() {\n    const [counter, setCounter] = useState(0);\n    const increase = () =\u003e {\n      setCounter(counter + 1);\n    };\n    return (\n      \u003cStringToReactComponent data={{counter, increase}}\u003e\n        {`(props)=\u003e{\n           return (\u003c\u003e\n             \u003cbutton onClick={props.increase}\u003e+\u003c/button\u003e\n             \u003cspan\u003e{'counter : '+ props.counter}\u003c/span\u003e\n             \u003c/\u003e);\n         }`}\n      \u003c/StringToReactComponent\u003e\n    );\n  }\n  ```\n\n### babelOptions\n\n- type : `object`\n- required : `No`\n- default value : `{presets: [\"react\"],sourceMaps: \"inline\"}`\n- See the full option list [here](https://babeljs.io/docs/en/options)\n- examples :\n  - using typescript :\n    ```js\n    \u003cStringToReactComponent\n      babelOptions={{filename: 'counter.ts', presets: ['react', ['typescript', {allExtensions: true, isTSX: true}]]}}\u003e\n      {`()=\u003e{\n         const [counter,setCounter]=React.useState\u003cnumber\u003e(0);\n         const increase=()=\u003e{\n           setCounter(counter+1);\n         };\n         return (\u003c\u003e\n           \u003cbutton onClick={increase}\u003e+\u003c/button\u003e\n           \u003cspan\u003e{'counter : '+ counter}\u003c/span\u003e\n           \u003c/\u003e);\n        }`}\n    \u003c/StringToReactComponent\u003e\n    ```\n\n## Caveats\n\nThis plugin does not use `eval` function, however, suffers from security and might expose you to XSS attacks\n\nTo prevent XSS attacks, You should sanitize user input before storing it.\n\n## Test\n\n```js\n$ npm run test\n```\n\n## License\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev-javascript%2Fstring-to-react-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdev-javascript%2Fstring-to-react-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev-javascript%2Fstring-to-react-component/lists"}