A React component which can parse JSX and output rendered React Components.
import React from 'react'
import JsxParser from 'react-jsx-parser'
class InjectableComponent extends Component {
static defaultProps = {
eventHandler: () => {}
}
// ... inner workings of InjectableComponent
}
const MyComponent = () => (
<JsxParser
bindings={{
myEventHandler: () => { /* ... do stuff ... */ }
}}
components={{ InjectableComponent }}
jsx={`
<h1>Header</h1>
<InjectableComponent eventHandler={myEventHandler} />
`}
/>
)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.
// Import desired set of components
import { ComponentA, ComponentB } from 'somePackage/Components'
import ComponentC from 'somePackage/ComponentC'
import ComponentD from 'somePackage/ComponentD'
...
// Load an HTML or XML fragment from a remote API
const dynamicHtml = loadRemoteData()
...
// Within your component's render method, bind these components and the fragment as props
<JsxParser
bindings={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.
JsxParser.defaultProps = {
bindings: {}, // 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 names
blacklistedAttrs: [/^on.+/i],
// by default, removes all <script> tags
blacklistedTags: ['script'],
// Components must extend React.Component, React.PureComponent, or be a Function
components: {},
jsx: '',
// If you specify an onError function, any rendering errors will be reported to it
onError: () => {},
// If you specify showWarnings, any rendering errors will be output to console.warn
showWarnings: false,
// If you specify renderInWrapper=false, the HTML output will have no <div> wrapper
renderInWrapper: true,
}