Skip to content
plugin to transform to React
Branch: master
Clone or download
Latest commit d1e27e6 Jul 12, 2019
Permalink
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
readme.md Add missing closing paren Jul 9, 2019
test.js Fix bug where children were not used Jul 12, 2019

readme.md

rehype-react

Build Coverage Downloads Size Sponsors Backers Chat

rehype plugin to transform to React.

Install

npm:

npm install rehype-react

Use

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(markdown)
  .use(slug)
  .use(toc)
  .use(github, {repository: 'rehypejs/rehype-react'})
  .use(remark2rehype)
  .use(highlight)
  .use(rehype2react, {createElement: React.createElement})

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

  onChange(ev) {
    this.setState({text: ev.target.value})
  }

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

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>
<ul>
<li><a href="#rhysd">@rhysd</a></li>
</ul>
<h2 id="rhysd"><a href="https://github.com/rhysd"><strong>@rhysd</strong></a></h2></div>

API

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.

options
options.createElement

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

options.Fragment

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

options.components

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
    }
  })
  //
options.prefix

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

Related

Contribute

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

License

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

You can’t perform that action at this time.