React JSX Parser

Common errors

• Error: Functions are not allowed to be parsed inline.

  cause Attempting to use an inline function declaration (e.g., `onClick={() => {}}` or `onPress={function() {}}`) directly within the `jsx` prop string passed to `JsxParser`.
  fix Define the function in the `bindings` prop of `JsxParser` and reference its name within the `jsx` string. Example: `<JsxParser bindings={{ myHandler: () => console.log('clicked') }} jsx='<button onClick={myHandler}>Click me</button>' />`.

• React.Children.only expected to receive a single React element child.

  cause This error or similar rendering issues (e.g., `_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx is not a function`) often occur when `react-jsx-parser` v1.x is used in a project that has upgraded to React 18.
  fix Upgrade `react-jsx-parser` to version 2.0.0 or higher to ensure compatibility with React 18's updated rendering mechanisms. Run: `npm install react-jsx-parser@^2`.

Warnings

• breaking Upgrading to React 18 requires `react-jsx-parser` version 2.0.0 or higher. Previous versions (v1.x) are incompatible with React 18's new concurrent rendering features and will lead to errors.
  Fix: Upgrade `react-jsx-parser` to `^2.0.0` or a later stable version: `npm install react-jsx-parser@^2`.
• gotcha Inline function declarations (e.g., arrow functions or anonymous functions directly in props like `onClick={() => {...}}`) are explicitly disallowed within the `jsx` string. This is a deliberate security measure to prevent XSS vulnerabilities when parsing untrusted JSX.
  Fix: Pass functions via the `bindings` prop and reference them by name in the `jsx` string. For example, use `bindings={{ myHandler: () => { /* do stuff */ } }}` and then `onClick={myHandler}` in your JSX string.
• gotcha Support for components containing dot notation in their names (e.g., `<Form.Field />`) was introduced in version 2.4.0. If you encounter issues parsing such components, your version may be too old.
  Fix: Ensure you are using `react-jsx-parser` version 2.4.0 or higher to correctly resolve components with dot notation. Upgrade using: `npm install react-jsx-parser@^2.4`.

Install

• npm install react-jsx-parser npm
• yarn add react-jsx-parser yarn
• pnpm add react-jsx-parser pnpm

Imports

• JsxParser
  wrong:

  const JsxParser = require('react-jsx-parser')

  correct:

  import JsxParser from 'react-jsx-parser'

  Primary component for parsing and rendering JSX strings. The library uses ES Modules internally and expects ES Module imports in modern React applications.
• React

  import React from 'react'

  Standard React import is necessary for defining components and using JSX, typically alongside JsxParser.
• JsxParserProps

  import type { JsxParserProps } from 'react-jsx-parser'

  TypeScript type definition for the props accepted by the `JsxParser` component, useful for type-checking when using TypeScript.

Quickstart

This quickstart demonstrates how to use `JsxParser` to render a string containing JSX. It shows binding custom components, passing props, using expressions, and referencing functions defined in the `bindings` prop. It also highlights the usage of components with dot notation and function-as-children patterns.

import React from 'react';
import JsxParser from 'react-jsx-parser';

// A mock component from 'some-library-of-components'
const Library = {
  SomeComponent: ({ someProp, calc, stringProp, children }) => (
    <div>
      <h3>Library.SomeComponent</h3>
      <p>Prop A: {someProp}</p>
      <p>Calc: {calc}</p>
      <p>String Prop: {stringProp}</p>
      {children && children({ name: 'Fetched Data' })}
    </div>
  ),
  DataFetcher: ({ children }) => (
    <div>
      <h4>Library.DataFetcher</h4>
      {children && children({ name: 'Dynamic Data' })}
    </div>
  ),
};

// An injectable custom component
const InjectableComponent = ({ eventHandler, truthyProp }) => {
  return (
    <div onClick={eventHandler} style={{ border: '1px solid gray', padding: '10px', margin: '10px' }}>
      <p>Injectable Component</p>
      <p>Truthy Prop: {String(truthyProp)}</p>
      <button onClick={eventHandler}>Trigger Event</button>
    </div>
  );
};

const MyParsedComponent = () => (
  <JsxParser
    bindings={{
      foo: 'bar',
      myEventHandler: () => {
        console.log('Event handler triggered!');
        alert('Hello from event handler!');
      },
    }}
    components={{ InjectableComponent, Library }}
    jsx={`
      <h1>Header from Parsed JSX</h1>
      <InjectableComponent eventHandler={myEventHandler} truthyProp />
      <Library.SomeComponent someProp={foo} calc={1 + 1} stringProp="hello world">
        {(data) => <div>Data from children: {data.name}</div>}
      </Library.SomeComponent>
      <Library.DataFetcher>((data) => <div>Fetched Data Name: {data.name}</div>)</Library.DataFetcher>
      <p>This is a standard HTML paragraph.</p>
    `}
  />
);

export default MyParsedComponent;