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 [email protected], 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

remark-react is similar in configuration to its alternative remark-html. You’ll want to use one or the other but setting up plugins for either is done in the same way. As such, you can see how to integrate with other remark plugins in the Integrations section of remark-html’s documentation.

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.