jonjaques-react-jsx-parser

react-jsx-parser

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

Basic Usage - Injecting JSX as a String

import * as React from 'react'
import JsxParser from 'react-jsx-parser'

class InjectableComponent extends React.Component {
  // ... inner workings of InjectableComponent
}

class MyComponent extends React.Component {
  render() {
    /* Pull out parent props which shouldn't be bound,
       then pass the rest as `bindings` to all children */
    const { prop1, prop2, ...bindings } = this.props

    return (
      <JsxParser
        bindings={bindings}
        components={[InjectableComponent]}
        jsx={'\
          <h1>Header</h1>\
          <InjectableComponent></InjectableComponent>\
        '}
      />
    )
  }
}

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.

Advanced Usage - Injecting Dynamic JSX

// Import desired set of components
import ComponentA from 'somePackage/ComponentA'
import ComponentB from 'somePackage/ComponentB'
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.

PropTypes / Settings

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[a-z]*'], //= /on[a-z]*/gi

  // by default, removes all <script> tags
  blacklistedTags:  ['script'],

  // Components must extend React.Component or React.PureComponent
  components: [],

  jsx: '',
}

Known Limitations

• Custom elements must have a closing tag.