rehype plugin to transform to React
Last updated 2 months ago by wooorm .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install rehype-react 
SYNC missed versions from official npm registry.


Build Coverage Downloads Size Sponsors Backers Chat

rehype plugin to transform to React.



npm install rehype-react


The following example shows how to create a Markdown input textarea, and corresponding rendered HTML output. The Markdown is processed to add a Table of Contents, highlight code blocks, and to render GitHub mentions (and other cool GH features).

import React from 'react'
import ReactDOM from 'react-dom'
import unified from 'unified'
import markdown from 'remark-parse'
import slug from 'remark-slug'
import toc from 'remark-toc'
import github from 'remark-github'
import remark2rehype from 'remark-rehype'
import highlight from 'rehype-highlight'
import rehype2react from 'rehype-react'

var processor = unified()
  .use(github, {repository: 'rehypejs/rehype-react'})
  .use(rehype2react, {createElement: React.createElement})

class App extends React.Component {
  constructor() {
    this.state = {text: '# Hello\n\n## Table of Contents\n\n## @rhysd'}
    this.onChange = this.onChange.bind(this)

  onChange(ev) {

  render() {
    return (
        <textarea value={this.state.text} onChange={this.onChange} />
        <div id="preview">

ReactDOM.render(<App />, document.querySelector('#root'))

Yields (in id="preview", on first render):

<div><h1 id="hello">Hello</h1>
<h2 id="table-of-contents">Table of Contents</h2>
<li><a href="#rhysd">@rhysd</a></li>
<h2 id="rhysd"><a href=""><strong>@rhysd</strong></a></h2></div>


origin.use(rehype2react[, options])

rehype (hast) plugin to transform to React.

Typically, unified compilers return string. This compiler returns a ReactElement. When using .process or .processSync, the value at file.result (or when using .stringify, the return value), is a ReactElement. When using TypeScript, cast the type on your side.

ℹ️ In unified@9.0.0, the result of .process changed from file.contents to file.result.


How to create elements or components (Function). You should typically pass React.createElement.


Create fragments instead of an outer <div> if available (symbol). You should typically pass React.Fragment.


Override default elements (such as <a>, <p>, etcetera) by passing an object mapping tag names to components (Object.<Component>, default: {}).

For example, to use <MyLink> components instead of <a>, and <MyParagraph> instead of <p>, so something like this:

  // …
  .use(rehype2react, {
    createElement: React.createElement,
    components: {
      a: MyLink,
      p: MyParagraph
  // …

React key prefix (string, default: 'h-').


Pass the original hast node as props.node to custom React components (boolean, default: false).


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.



See in rehypejs/.github for ways to get started. See 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.

Current Tags

  • 6.1.0                                ...           latest (2 months ago)

14 Versions

  • 6.1.0                                ...           2 months ago
  • 6.0.0                                ...           4 months ago
  • 5.0.1                                ...           6 months ago
  • 5.0.0                                ...           7 months ago
  • 4.0.1                                ...           a year ago
  • 4.0.0                                ...           a year ago
  • 3.1.0                                ...           2 years ago
  • 3.0.3                                ...           2 years ago
  • 3.0.2                                ...           3 years ago
  • 3.0.1                                ...           3 years ago
  • 3.0.0                                ...           4 years ago
  • 2.0.0                                ...           4 years ago
  • 1.1.0                                ...           4 years ago
  • 1.0.0                                ...           4 years ago
Maintainers (2)
Today 2
This Week 59
This Month 2
Last Day 18
Last Week 180
Last Month 592
Dev Dependencies (18)
Dependents (81)

Copyright 2014 - 2016 © |