Skip to content
plugin to transform to React
Branch: master
Clone or download
Latest commit d1e27e6 Jul 12, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.editorconfig Rewrite module Oct 22, 2016
.gitignore Rewrite module Oct 22, 2016
.mailmap Refactor `package.json` Jun 28, 2019
.npmrc Remove `package-lock.json` Jun 28, 2019
.prettierignore Use `prettier` Jun 28, 2019
.travis.yml Use codecov Jun 28, 2019
index.js Fix bug where children were not used Jul 12, 2019
license Move `LICENSE` > `license` Jun 28, 2019
package.json 4.0.1 Jul 12, 2019 Add missing closing paren Jul 9, 2019
test.js Fix bug where children were not used Jul 12, 2019


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.contents (or when using .stringify, the return value), is a ReactElement. When using TypeScript, cast the type on your side.


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-').



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, organisation, or community you agree to abide by its terms.


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

You can’t perform that action at this time.