rehype-react
!Buildbuild-badgebuild
!Coveragecoverage-badgecoverage
!Downloadsdownloads-badgedownloads
!Sizesize-badgesize
!Sponsorssponsors-badgecollective
!Backersbackers-badgecollective
!Chatchat-badgechatrehype plugin to turn HTML into preact, react, solid, svelte, vue, etc.
Contents
* [`unified().use(rehypeReact, options)`](#unifieduserehypereact-options)
* [`Components`](#components)
* [`Options`](#options)
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, aJSX.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.Install
This package is ESM onlyesm. In Node.js (version 16+), install with npm:npm install rehype-react
In Deno with
esm.sh
esmsh:import rehypeReact from 'https://esm.sh/rehype-react@8'
In browsers with
esm.sh
esmsh:<script type="module">
import rehypeReact from 'https://esm.sh/rehype-react@8?bundle'
</script>
Use
Say our React appexample.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 isrehypeReact
api-rehype-react.unified().use(rehypeReact, options)
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 aJSX.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 acceptclass
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`](https://github.com/syntax-tree/hast-util-to-jsx-runtime#fragment),
required)
— fragment
jsx
(Jsx
from
`hast-util-to-jsx-runtime`](https://github.com/syntax-tree/hast-util-to-jsx-runtime#jsx),
required in production)
— dynamic JSX
jsxs
(Jsx
from
`hast-util-to-jsx-runtime`](https://github.com/syntax-tree/hast-util-to-jsx-runtime#jsx),
required in production)
— static JSX
jsxDEV
(JsxDev
from
`hast-util-to-jsx-runtime`](https://github.com/syntax-tree/hast-util-to-jsx-runtime#jsxdev),
required in development)
— development JSX
components
(Partial<Components>
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 `<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 typesComponents
api-components and
Options
api-options.
More advanced types are exposed from
hast-util-to-jsx-runtime
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 ofrehype-react
can open you up to a cross-site scripting (XSS)xss
attack if the tree is unsafe.
Use rehype-sanitize
rehype-sanitize to make the tree safe.Related
— turn markdown into HTML to support rehype
— turn HTML into markdown to support remark
— rehype plugin to support retext
— sanitize HTML
Contribute
Seecontributing.md
contributing in rehypejs/.github
health for ways
to get started.
See support.md
support for ways to get help.This project has a code of conductcoc. By interacting with this repository, organization, or community you agree to abide by its terms.