rehype plugin to turn HTML into preact, react, solid, svelte, vue, etc.
- What is this?
- When should I use this?
- Install
- Use
- API
- 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
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.
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>
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>
This package exports no identifiers.
The default export is rehypeReact
.
Turn HTML into preact, react, solid, svelte, vue, etc.
options
(Options
, required) β configuration
Nothing (undefined
).
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
.
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' |
Possible components to use (TypeScript type).
See Components
from
hast-util-to-jsx-runtime
for more info.
Configuration (TypeScript type).
Fragment
(Fragment
fromhast-util-to-jsx-runtime
, required) β fragmentjsx
(Jsx
fromhast-util-to-jsx-runtime
, required in production) β dynamic JSXjsxs
(Jsx
fromhast-util-to-jsx-runtime
, required in production) β static JSXjsxDEV
(JsxDev
fromhast-util-to-jsx-runtime
, required in development) β development JSXcomponents
(Partial<Components>
, optional) β components to usedevelopment
(boolean
, default:false
) β whether to usejsxDEV
when on orjsx
andjsxs
when offelementAttributeNameCase
('html'
or'react'
, default:'react'
) β specify casing to use for attribute namespassNode
(boolean
, default:false
) β pass the hast element node to componentsspace
('html'
or'svg'
, default:'html'
) β whethertree
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 itstylePropertyNameCase
('css'
or'dom'
, default:'dom'
) β specify casing to use for property names instyle
objectstableCellAlignToStyle
(boolean
, default:true
) β turn obsoletealign
props ontd
andth
into CSSstyle
props
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
.
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+.
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.
remark-rehype
β turn markdown into HTML to support rehyperehype-remark
β turn HTML into markdown to support remarkrehype-retext
β rehype plugin to support retextrehype-sanitize
β sanitize HTML
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.
MIT Β© Titus Wormer, modified by Tom MacWright, Mapbox, and rhysd.