Registry / web-framework / react-jsx-parser

react-jsx-parser

library2.4.1jsnpmunverified

`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.

web-framework

npm install react-jsx-parser

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-JSX-PARSER

react-jsx-parser

web-frameworkjavascriptv2.4.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

JsxParser

✓ import JsxParser from 'react-jsx-parser'

✗ const JsxParser = require('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.

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;

Debug

Known issues

breakingUpgrading 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`.

affects: <2.0.0

gotchaInline 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.

affects: >=1.0.0

gotchaSupport 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`.

affects: <2.4.0

Errors

Common errors & fixes

Error: Functions are not allowed to be parsed inline.

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.

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`.

Upgrade

Version history

2.4.1latest on npm

Audit

Dependencies

reactrequiredCore React library for component rendering.

react-domrequiredNeeded for rendering React components in the DOM.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/TroyAlford/react-jsx-parser ↗

packagehttps://www.npmjs.com/package/react-jsx-parser ↗