react-jsx-parser

A React component which can parse JSX and output rendered React Components.

Basic Usage - Injecting JSX as a String

importReactfrom'react'importJsxParserfrom'react-jsx-parser'importLibraryfrom'someLibrary'classInjectableComponentextendsComponent{staticdefaultProps={eventHandler: ()=>{}}// ... inner workings of InjectableComponent}constMyComponent=()=>(<JsxParserbindings={{myEventHandler: ()=>{/* ... do stuff ... */}}}components={{ InjectableComponent, Library }}jsx={` <h1>Header</h1> <InjectableComponent eventHandler={myEventHandler} /> <Library.SomeComponent /> `}/>)

Because InjectableComponent is passed into the JsxParser.props.components prop, it is treated as a known element type, and created using React.createElement(...) when parsed out of the JSX.

You can also pass a set of components into the JsxParser.props.components prop, and use it in JSX with dot notation.

Advanced Usage - Injecting Dynamic JSX

// Import desired set of componentsimport{ComponentA,ComponentB}from'somePackage/Components'importComponentCfrom'somePackage/ComponentC'importComponentDfrom'somePackage/ComponentD'
...
// Load an HTML or XML fragment from a remote APIconstdynamicHtml=loadRemoteData()...// Within your component's render method, bind these components and the fragment as props<JsxParserbindings={bindings}components={{ ComponentA, ComponentB, ComponentC, ComponentD }}jsx={dynamicHtml}/>

Any 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.

Note: Non-standard tags may throw errors and warnings, but will typically be rendered in a reasonable way.

PropTypes / Settings

JsxParser.defaultProps={// if false, unrecognized elements like <foo> are omitted and reported via onErrorallowUnknownElements: true,// by default, allow unrecognized elementsbindings: {},// by default, do not add any additional bindings// by default, just removes `on*` attributes (onClick, onChange, etc.)// values are used as a regex to match property namesblacklistedAttrs: [/^on.+/i],// by default, removes all <script> tagsblacklistedTags: ['script'],// an object map of component tag-names to their definitions - see above for examples// components must extend React.Component, React.PureComponent, or be a Functioncomponents: {},componentsOnly: false,// non-component HTML tags are allowed by default, omitted if truejsx: '',// the jsx string to be parsed & renderedonError: ()=>{},// if specified, any rendering errors are reported via this methodshowWarnings: false,// if true showWarnings, rendering errors are output with console.warnrenderInWrapper: true,// if false, the HTML output will have no <div> wrapper}