{"library":"react-from-dom","title":"React From DOM: HTML/XML to React Element Converter","description":"react-from-dom is a utility library designed to convert HTML/XML source code strings or existing DOM nodes into React elements. It serves as a safer, more controlled alternative to React's `dangerouslySetInnerHTML`, allowing developers to parse external content and render it as native React components. The current stable version is 0.7.5. The package maintains a steady release cadence, primarily focusing on dependency updates, minor bug fixes, and continuous integration improvements, as seen in the recent 0.7.x releases. Key differentiators include its ability to accept both string and DOM Node inputs, comprehensive options for parsing (e.g., whitespace control, specific selectors, MIME types), and an extensible 'actions' API to modify or replace nodes during conversion, enabling powerful transformations and sanitization workflows not easily achievable with `dangerouslySetInnerHTML`.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-from-dom"],"cli":null},"imports":["import convert from 'react-from-dom';","import type { Options } from 'react-from-dom';","import type { Action } from 'react-from-dom';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport convert from 'react-from-dom';\n\n// Example 1: Converting an HTML string\nconst htmlString = `\n  <div class=\"card\">\n    <h3>Welcome to react-from-dom!</h3>\n    <p>This paragraph has <strong>bold text</strong> and an <a href=\"#\">internal link</a>.</p>\n    <img src=\"https://via.placeholder.com/150\" alt=\"Placeholder Image\" />\n    <p style=\"color: red; font-size: 14px;\">Styled content.</p>\n  </div>\n`;\n\nconst reactElementFromString = convert(htmlString, {\n  actions: [\n    {\n      condition: (node) => node.nodeName.toLowerCase() === 'a',\n      pre: (node) => {\n        if (node instanceof HTMLElement) {\n          node.setAttribute('target', '_blank'); // Add target='_blank' to links\n          node.setAttribute('rel', 'noopener noreferrer');\n        }\n        return node;\n      },\n    },\n  ],\n});\n\n// Example 2: Converting an existing DOM Node\nconst rootDomNode = document.createElement('div');\nrootDomNode.id = 'dynamic-root';\nconst p = document.createElement('p');\np.textContent = 'This content came from a dynamically created DOM node.';\nrootDomNode.appendChild(p);\n\nconst reactElementFromDomNode = convert(rootDomNode);\n\nconst App = () => (\n  <div>\n    <h2>Converted from HTML String:</h2>\n    {reactElementFromString}\n\n    <h2>Converted from DOM Node:</h2>\n    {reactElementFromDomNode}\n\n    <p>Note: The link in the first example will open in a new tab due to an 'action'.</p>\n  </div>\n);\n\nexport default App;\n","lang":"typescript","description":"This quickstart demonstrates converting both HTML strings and existing DOM nodes into React elements, including an example of using the `actions` option to modify parsed nodes (adding `target=\"_blank\"` to links).","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}