rehype-react

What is rehype-react?

rehype-react is a plugin for the rehype ecosystem that allows you to transform HTML into React components. It is particularly useful for rendering HTML content in React applications, enabling you to leverage React's component-based architecture while working with HTML content.

What are rehype-react's main functionalities?

Transform HTML to React Components

This feature allows you to transform HTML strings into React components. The code sample demonstrates how to use rehype-react with unified and rehype-parse to parse an HTML string and convert it into a React element that can be rendered using ReactDOM.

const rehypeReact = require('rehype-react');
const unified = require('unified');
const rehypeParse = require('rehype-parse');
const React = require('react');
const ReactDOM = require('react-dom');

const processor = unified()
  .use(rehypeParse, { fragment: true })
  .use(rehypeReact, { createElement: React.createElement });

const html = '<div>Hello, <strong>world</strong>!</div>';
const reactElement = processor.processSync(html).result;

ReactDOM.render(reactElement, document.getElementById('root'));

Custom Component Mapping

This feature allows you to map HTML tags to custom React components. The code sample shows how to replace the default 'div' tag with a custom React component 'MyComponent' that styles the text in red.

const rehypeReact = require('rehype-react');
const unified = require('unified');
const rehypeParse = require('rehype-parse');
const React = require('react');
const ReactDOM = require('react-dom');

const MyComponent = (props) => <div style={{ color: 'red' }}>{props.children}</div>;

const processor = unified()
  .use(rehypeParse, { fragment: true })
  .use(rehypeReact, { createElement: React.createElement, components: { div: MyComponent } });

const html = '<div>Hello, <strong>world</strong>!</div>';
const reactElement = processor.processSync(html).result;

ReactDOM.render(reactElement, document.getElementById('root'));

Other packages similar to rehype-react

html-react-parser

html-react-parser is a library that converts HTML strings into React components. It is similar to rehype-react in that it allows you to render HTML content within React applications. However, html-react-parser is more straightforward and does not require the use of the unified processor.

react-html-parser

react-html-parser is another library for converting HTML strings into React components. It is similar to rehype-react but offers a simpler API. It does not provide the same level of customization and extensibility as rehype-react, but it is easier to use for basic HTML to React transformations.

README

rehype-react

rehype plugin to turn HTML into preact, react, solid, svelte, vue, etc.

Contents

• What is this?
• When should I use this?
• Install
• Use
• API
  • unified().use(rehypeReact, options)
  • Components
  • Options
• Types
• Compatibility
• Security
• Related
• Contribute
• License

What is this?

This package is a unified (rehype) plugin that compiles HTML (hast) to any JSX runtime (preact, react, solid, svelte, vue, etc).

unified is a project that transforms content with abstract syntax trees (ASTs). rehype adds support for HTML to unified. hast is the HTML AST that rehype uses. This is a rehype plugin that adds a compiler to compile hast to a JSX runtime.

When should I use this?

This plugin adds a compiler for rehype, which means that it turns the final HTML (hast) syntax tree into something else (in this case, a JSX.Element). It’s useful when you’re already using unified (whether remark or rehype) or are open to learning about ASTs (they’re powerful!) and want to render content in your app.

If you’re not familiar with unified, then react-markdown might be a better fit. You can also use react-remark instead, which is somewhere between rehype-react and react-markdown, as it does more that the former and is more modern (such as supporting hooks) than the latter, and also a good alternative. If you want to use JavaScript and JSX inside markdown files, use MDX.

Install

This package is ESM only. In Node.js (version 16+), install with npm:

npm install rehype-react

In Deno with esm.sh:

import rehypeReact from 'https://esm.sh/rehype-react@8'

In browsers with esm.sh:

<script type="module">
  import rehypeReact from 'https://esm.sh/rehype-react@8?bundle'
</script>

Use

Say our React app example.js looks as follows:

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'

// @ts-expect-error: the react types are missing.
const production = {Fragment: prod.Fragment, jsx: prod.jsx, jsxs: prod.jsxs}

const text = `<h2>Hello, world!</h2>
<p>Welcome to my page 👀</p>`

/**
 * @param {string} text
 * @returns {JSX.Element}
 */
function useProcessor(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 useProcessor(text)
}

…running that in Next.js or similar, we’d get:

<h2>Hello, world!</h2>
<p>Welcome to my page 👀</p>

API

This package exports no identifiers. The default export is rehypeReact.

unified().use(rehypeReact, options)

Turn HTML into preact, react, solid, svelte, vue, etc.

Parameters

• options (Options, required) — configuration

Returns

Nothing (undefined).

Result

This plugin registers a compiler that returns a JSX.Element where compilers typically return string. When using .stringify on unified, the result is such a JSX.Element. When using .process (or .processSync), the result is available at file.result.

Frameworks

There are differences between what JSX frameworks accept, such as whether they accept class or className, or background-color or backgroundColor.

For hast elements transformed by this project, this is be handled through options:

Framework	elementAttributeNameCase	stylePropertyNameCase
Preact	'html'	'dom'
React	'react'	'dom'
Solid	'html'	'css'
Vue	'html'	'dom'

Components

Possible components to use (TypeScript type).

See Components from hast-util-to-jsx-runtime for more info.

Options

Configuration (TypeScript type).

Fields

• Fragment (Fragment from hast-util-to-jsx-runtime, required) — fragment
• jsx (Jsx from hast-util-to-jsx-runtime, required in production) — dynamic JSX
• jsxs (Jsx from hast-util-to-jsx-runtime, required in production) — static JSX
• jsxDEV (JsxDev from hast-util-to-jsx-runtime, required in development) — development JSX
• components (Partial<Components>, optional) — components to use
• development (boolean, default: false) — whether to use jsxDEV when on or jsx and jsxs when off
• elementAttributeNameCase ('html' or 'react', default: 'react') — specify casing to use for attribute names
• passNode (boolean, default: false) — pass the hast element node to components
• space ('html' or 'svg', default: 'html') — whether tree is in the 'html' or 'svg' space, when an <svg> element is found in the HTML space, this package already automatically switches to and from the SVG space when entering and exiting it
• stylePropertyNameCase ('css' or 'dom', default: 'dom') — specify casing to use for property names in style objects
• tableCellAlignToStyle (boolean, default: true) — turn obsolete align props on td and th into CSS style props

Types

This package is fully typed with TypeScript. It exports the additional types Components and Options. More advanced types are exposed from hast-util-to-jsx-runtime.

Compatibility

Projects maintained by the unified collective are compatible with maintained versions of Node.js.

When we cut a new major release, we drop support for unmaintained versions of Node. This means we try to keep the current release line, rehype-react@^8, compatible with Node.js 17.

This plugin works with rehype-parse version 3+, rehype version 4+, and unified version 9+, and React 18+.

Security

Use of rehype-react can open you up to a cross-site scripting (XSS) attack if the tree is unsafe. Use rehype-sanitize to make the tree safe.

Related

• remark-rehype — turn markdown into HTML to support rehype
• rehype-remark — turn HTML into markdown to support remark
• rehype-retext — rehype plugin to support retext
• rehype-sanitize — sanitize HTML

Contribute

See contributing.md in rehypejs/.github for ways to get started. See support.md for ways to get help.

This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.

License

MIT © Titus Wormer, modified by Tom MacWright, Mapbox, and rhysd.