rehype-react

import { Fragment, createElement, useEffect, useState } from 'react'; import * as prod from 'react/jsx-runtime'; import rehypeParse from 'rehype-parse'; import rehypeReact from 'rehype-react'; import { unified } from 'unified'; // To run this example: // npm install react react-dom rehype-parse rehype-react unified // @ts-expect-error: The react types might be missing for `prod` object const production = { Fragment: prod.Fragment, jsx: prod.jsx, jsxs: prod.jsxs }; const 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>`; /** * A React hook to process HTML content using rehype-react. * @param {string} text The HTML string to process. * @returns {JSX.Element} A React component tree. */ function useHtmlProcessor(text) { const [Content, setContent] = useState(createElement(Fragment)); useEffect( function () { (async function () { const file = await unified() .use(rehypeParse, { fragment: true }) .use(rehypeReact, production) .process(text); setContent(file.result); })(); }, [text] ); return Content; } export default function App() { return useHtmlProcessor(htmlContent); } // In a typical React app, you would render <App /> using ReactDOM.createRoot: // import ReactDOM from 'react-dom/client'; // const root = ReactDOM.createRoot(document.getElementById('root')); // root.render(<App />);