{"id":11737,"library":"react-jsx-parser","title":"React JSX Parser","description":"`react-jsx-parser` is a React component designed to parse JSX provided as a string and render it into actual React components. The current stable version is 2.4.1, which includes improvements for unary operator support, error handling, and TypeScript typings. The library maintains a regular release cadence with recent minor updates. A significant major release (v2.0.0) introduced compatibility with React 18+. Key differentiators include its ability to dynamically render React components from string-based JSX, its explicit prevention of inline function declarations within the parsed JSX to mitigate XSS attack vectors, and its robust support for various binding types (implicit boolean, string, expression, and named-value bindings). It seamlessly handles component collections and dot-notation for nested components, making it suitable for dynamic content rendering where JSX is sourced from external data.","status":"active","version":"2.4.1","language":"javascript","source_language":"en","source_url":"https://github.com/TroyAlford/react-jsx-parser","tags":["javascript","react","jsx","typescript"],"install":[{"cmd":"npm install react-jsx-parser","lang":"bash","label":"npm"},{"cmd":"yarn add react-jsx-parser","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-jsx-parser","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core React library for component rendering.","package":"react","optional":false},{"reason":"Needed for rendering React components in the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"Primary component for parsing and rendering JSX strings. The library uses ES Modules internally and expects ES Module imports in modern React applications.","wrong":"const JsxParser = require('react-jsx-parser')","symbol":"JsxParser","correct":"import JsxParser from 'react-jsx-parser'"},{"note":"Standard React import is necessary for defining components and using JSX, typically alongside JsxParser.","symbol":"React","correct":"import React from 'react'"},{"note":"TypeScript type definition for the props accepted by the `JsxParser` component, useful for type-checking when using TypeScript.","symbol":"JsxParserProps","correct":"import type { JsxParserProps } from 'react-jsx-parser'"}],"quickstart":{"code":"import React from 'react';\nimport JsxParser from 'react-jsx-parser';\n\n// A mock component from 'some-library-of-components'\nconst Library = {\n SomeComponent: ({ someProp, calc, stringProp, children }) => (\n
\n

Library.SomeComponent

\n

Prop A: {someProp}

\n

Calc: {calc}

\n

String Prop: {stringProp}

\n {children && children({ name: 'Fetched Data' })}\n
\n ),\n DataFetcher: ({ children }) => (\n
\n

Library.DataFetcher

\n {children && children({ name: 'Dynamic Data' })}\n
\n ),\n};\n\n// An injectable custom component\nconst InjectableComponent = ({ eventHandler, truthyProp }) => {\n return (\n
\n

Injectable Component

\n

Truthy Prop: {String(truthyProp)}

\n \n
\n );\n};\n\nconst MyParsedComponent = () => (\n {\n console.log('Event handler triggered!');\n alert('Hello from event handler!');\n },\n }}\n components={{ InjectableComponent, Library }}\n jsx={`\n

Header from Parsed JSX

\n \n \n {(data) =>
Data from children: {data.name}
}\n \n ((data) =>
Fetched Data Name: {data.name}
)\n

This is a standard HTML paragraph.

\n `}\n />\n);\n\nexport default MyParsedComponent;\n","lang":"typescript","description":"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."},"warnings":[{"fix":"Upgrade `react-jsx-parser` to `^2.0.0` or a later stable version: `npm install react-jsx-parser@^2`.","message":"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.","severity":"breaking","affected_versions":"<2.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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`.","message":"Support for components containing dot notation in their names (e.g., ``) was introduced in version 2.4.0. If you encounter issues parsing such components, your version may be too old.","severity":"gotcha","affected_versions":"<2.4.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Define the function in the `bindings` prop of `JsxParser` and reference its name within the `jsx` string. Example: ` console.log('clicked') }} jsx='' />`.","cause":"Attempting to use an inline function declaration (e.g., `onClick={() => {}}` or `onPress={function() {}}`) directly within the `jsx` prop string passed to `JsxParser`.","error":"Error: Functions are not allowed to be parsed inline."},{"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`.","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.","error":"React.Children.only expected to receive a single React element child."}],"ecosystem":"npm"}