unified

Project: rehypejs/rehype-react

Package: rehype-react@7.0.3

  1. Dependents: 91
  2. rehype plugin to transform to React
  1. unified 173
  2. plugin 137
  3. html 122
  4. rehype 87
  5. hast 73
  6. rehype-plugin 61
  7. react 16

rehype-react

Build Coverage Downloads Size Sponsors Backers Chat

rehype plugin to transform to React.

Install

This package is ESM only: Node 12+ is needed to use it and it must be imported instead of required.

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 remarkParse from 'remark-parse'
import remarkSlug from 'remark-slug'
import remarkToc from 'remark-toc'
import remarkGithub from 'remark-github'
import remarkRehype from 'remark-rehype'
import rehypeHighlight from 'rehype-highlight'
import rehypeReact from 'rehype-react'

const processor = unified()
  .use(remarkParse)
  .use(remarkSlug)
  .use(remarkToc)
  .use(remarkGithub, {repository: 'rehypejs/rehype-react'})
  .use(remarkRehype)
  .use(rehypeHighlight)
  .use(rehypeReact, {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).result}</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

This package exports no identifiers. The default export is rehypeReact.

unified().use(rehypeReact, options)

rehype (hast) plugin to transform to React.

Typically, unified compilers return string. This compiler returns a ReactElement (or similar). When using .process or .processSync, the value at file.result (or when using .stringify, the return value), is such a custom node.

options
options.createElement

How to create elements or components (Function, required). 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-').

options.passNode

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

Security

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.

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

License

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