{"library":"rehype-react","title":"rehype-react","description":"rehype-react is a `rehype` plugin designed to compile HTML abstract syntax trees (hast) into JSX elements, enabling the rendering of HTML content within various JSX runtimes. It currently supports React, Preact, Solid, Svelte, and Vue. The current stable version is 8.0.0. The project maintains an active release cadence with frequent patch and minor updates, and major versions are released to introduce significant architectural changes, such as the move to ESM or multi-framework support. A key differentiator is its integration within the `unified` ecosystem, allowing developers to leverage a rich pipeline of AST transformations on HTML content before it's rendered. This provides more control compared to simpler solutions like `react-markdown` and offers an alternative to `react-remark` for HTML processing.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install rehype-react"],"cli":null},"imports":["import rehypeReact from 'rehype-react'","import * as production from 'react/jsx-runtime'","import { unified } from 'unified'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { Fragment, createElement, useEffect, useState } from 'react';\nimport * as prod from 'react/jsx-runtime';\nimport rehypeParse from 'rehype-parse';\nimport rehypeReact from 'rehype-react';\nimport { unified } from 'unified';\n\n// To run this example:\n// npm install react react-dom rehype-parse rehype-react unified\n\n// @ts-expect-error: The react types might be missing for `prod` object\nconst production = { Fragment: prod.Fragment, jsx: prod.jsx, jsxs: prod.jsxs };\n\nconst htmlContent = `<h2>Hello, world from rehype-react!</h2>\\n<p>This paragraph contains <em>emphasized</em> text and a <a href=\"#\">link</a>.</p>\\n<p>Current Node.js version is ${process.version}.</p>`;\n\n/**\n * A React hook to process HTML content using rehype-react.\n * @param {string} text The HTML string to process.\n * @returns {JSX.Element} A React component tree.\n */\nfunction useHtmlProcessor(text) {\n  const [Content, setContent] = useState(createElement(Fragment));\n\n  useEffect(\n    function () {\n      (async function () {\n        const file = await unified()\n          .use(rehypeParse, { fragment: true })\n          .use(rehypeReact, production)\n          .process(text);\n\n        setContent(file.result);\n      })();\n    },\n    [text]\n  );\n\n  return Content;\n}\n\nexport default function App() {\n  return useHtmlProcessor(htmlContent);\n}\n\n// In a typical React app, you would render <App /> using ReactDOM.createRoot:\n// import ReactDOM from 'react-dom/client';\n// const root = ReactDOM.createRoot(document.getElementById('root'));\n// root.render(<App />);","lang":"typescript","description":"This quickstart demonstrates how to use `rehype-react` within a React component to transform an HTML string into a React element tree, supporting multiple JSX runtimes since v8.0.0.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}