Skip to content
plugin to transform to React
HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test
.editorconfig
.gitignore
.npmrc
.prettierignore
.remarkignore
.travis.yml
changelog.md
index.js
license
package.json
readme.md

readme.md

remark-react

Build Coverage Downloads Size Sponsors Backers Chat

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 customisation, it isn’t very pluggable. It’s probably better to use remark-rehype and rehype-react directly to benefit from the rehype ecosystem.

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).contents
          }
        </div>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

API

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

Transform Markdown to React.

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

License

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

You can’t perform that action at this time.