rehype plugin to transform to React
npm install rehype-react[![Build][build-badge]][build]
[![Coverage][coverage-badge]][coverage]
[![Downloads][downloads-badge]][downloads]
[![Size][size-badge]][size]
[![Sponsors][sponsors-badge]][collective]
[![Backers][backers-badge]][collective]
[![Chat][chat-badge]][chat]
[rehype][] plugin to turn HTML into preact, react, solid, svelte, vue, etc.
* What is this?
* When should I use this?
* Install
* Use
* API
* unified().use(rehypeReact, options)
* Components
* Options
* Types
* Compatibility
* Security
* Related
* Contribute
* License
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.
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][react-markdown]
might be a better fit.
You can also use [react-remark][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][].
This package is [ESM only][esm].
In Node.js (version 16+), install with [npm][]:
``sh`
npm install rehype-react
In Deno with [esm.sh][esmsh]:
`js`
import rehypeReact from 'https://esm.sh/rehype-react@8'
In browsers with [esm.sh][esmsh]:
`html`
Say our React app example.js looks as follows:
`js
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 =
Welcome to my page 👀
/**
* @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:
html
Hello, world!
Welcome to my page 👀
`API
This package exports no identifiers.
The default export is [
][api-rehype-react].$3
Turn HTML into preact, react, solid, svelte, vue, etc.
###### Parameters
*
options ([Options][api-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' |$3
Possible components to use (TypeScript type).
Components from
hast-util-to-jsx-runtime
for more info.$3
Configuration (TypeScript type).
###### Fields
*
(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][api-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