rehype-react

by rehypejs

rehypejs / rehype-react

plugin to transform to React

160 Stars 18 Forks Last release: 3 months ago (6.1.0) MIT License 148 Commits 20 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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.