Need help with rehype-react?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

rehypejs
183 Stars 19 Forks MIT License 154 Commits 0 Opened issues

Description

plugin to transform to React

Services available

!
?

Need anything else?

Contributors list

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 (

{processor.processSync(this.state.text).result}
) } }

ReactDOM.render(, document.querySelector('#root'))

Yields (in

id="preview"
, on first render):

Hello

Table of Contents

@rhysd

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

ℹ️ In

[email protected]
, the result of

.process
changed from ~~
file.contents
~~ to
file.result
.
options
options.createElement

How to create elements or components (

Function
). You should typically pass
React.createElement
.
options.Fragment

Create fragments instead of an outer

if available (
symbol
). You should typically pass
React.Fragment
.
options.components

Override default elements (such as

,

, etcetera) by passing an object mapping tag names to components (
Object.
, default:
{}
).

For example, to use

 components instead of 
, and

instead of 

, 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.

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

License

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.