{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-jsx-parser"],"cli":null},"imports":["import JsxParser from 'react-jsx-parser'","import React from 'react'","import type { JsxParserProps } from 'react-jsx-parser'"],"auth":{"required":false,"env_vars":[]},"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    <div>\n      <h3>Library.SomeComponent</h3>\n      <p>Prop A: {someProp}</p>\n      <p>Calc: {calc}</p>\n      <p>String Prop: {stringProp}</p>\n      {children && children({ name: 'Fetched Data' })}\n    </div>\n  ),\n  DataFetcher: ({ children }) => (\n    <div>\n      <h4>Library.DataFetcher</h4>\n      {children && children({ name: 'Dynamic Data' })}\n    </div>\n  ),\n};\n\n// An injectable custom component\nconst InjectableComponent = ({ eventHandler, truthyProp }) => {\n  return (\n    <div onClick={eventHandler} style={{ border: '1px solid gray', padding: '10px', margin: '10px' }}>\n      <p>Injectable Component</p>\n      <p>Truthy Prop: {String(truthyProp)}</p>\n      <button onClick={eventHandler}>Trigger Event</button>\n    </div>\n  );\n};\n\nconst MyParsedComponent = () => (\n  <JsxParser\n    bindings={{\n      foo: 'bar',\n      myEventHandler: () => {\n        console.log('Event handler triggered!');\n        alert('Hello from event handler!');\n      },\n    }}\n    components={{ InjectableComponent, Library }}\n    jsx={`\n      <h1>Header from Parsed JSX</h1>\n      <InjectableComponent eventHandler={myEventHandler} truthyProp />\n      <Library.SomeComponent someProp={foo} calc={1 + 1} stringProp=\"hello world\">\n        {(data) => <div>Data from children: {data.name}</div>}\n      </Library.SomeComponent>\n      <Library.DataFetcher>((data) => <div>Fetched Data Name: {data.name}</div>)</Library.DataFetcher>\n      <p>This is a standard HTML paragraph.</p>\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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}