remark-react

remark plugin to transform Markdown to React.

Why? Using innerHTML and dangerouslySetInnerHTML in React is a common cause of XSS attacks: user input can include script tags and other kinds of active content that reaches across domains and harms security. remark-react builds a DOM in React, using React.createElement: this means that you can display parsed and formatted Markdown content in an application without using dangerouslySetInnerHTML.

⚠️ This package essentially packs remark-rehype and rehype-react, and although it does support some customization, it isn’t very pluggable. It’s probably better to use remark-rehype and rehype-react directly to benefit from the rehype ecosystem.

Note!

This plugin is ready for the new parser in remark (remarkjs/remark#536). No change is needed: it works exactly the same now as it did before!

Install

npm:

npm install remark-react

Use

import React from 'react'
import ReactDom from 'react-dom'
import unified from 'unified'
import parse from 'remark-parse'
import remark2react from 'remark-react'
 
class App extends React.Component {
  constructor() {
    super()
    this.state = { text: '# hello world' }
    this.onChange = this.onChange.bind(this)
  }
  onChange(e) {
    this.setState({ text: e.target.value })
  }
  render() {
    return (
      <div>
        <textarea value={this.state.text} onChange={this.onChange} />
        <div id="preview">
          {
            unified()
              .use(parse)
              .use(remark2react)
              .processSync(this.state.text).result
          }
        </div>
      </div>
    )
  }
}
 
ReactDom.render(<App />, document.getElementById('root'))

API

remark().use(react[, options])

Transform Markdown 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 unified@9.0.0, the result of .process changed from file.contents to file.result.

options

options.toHast

Configure how to transform mdast to hast (object, default: {}). Passed to mdast-util-to-hast. Note that toHast.allowDangerousHTML does not work: it’s not possible to inject raw HTML with this plugin (as it’s mean to prevent having to use dangerouslySetInnerHTML).

options.sanitize

Sanitation schema to use (object or boolean, default: undefined). Passed to hast-util-sanitize. The default schema, if none or true is passed, adheres to GitHub’s sanitation rules. Setting this to false is just as bad as using dangerouslySetInnerHTML.

options.prefix

React key (default: h-).

options.createElement

How to create elements or components (Function). Default: require('react').createElement

options.fragment

Create fragments instead of an outer <div> if available (Function, default: require('react').Fragment).

options.remarkReactComponents

Override default elements (such as <a>, <p>, etc) by defining an object comprised of element: Component key-value pairs (Object, default: undefined). For example, to output <MyLink> components instead of <a>, and <MyParagraph> instead of <p>:

remarkReactComponents: {
  a: MyLink,
  p: MyParagraph
}

Integrations

See how to integrate with other remark plugins in the Integrations section of remark-html.

Security

Use of remark-react is safe by default, but changing the sanitize option can open you up to a cross-site scripting (XSS) attack if the tree is unsafe.

Contribute

See contributing.md in remarkjs/.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 and Mapbox.