Project: remarkjs/remark-react

Package: remark-react@7.0.1

  1. Dependencies: 4·Dependents: 50
  2. remark plugin to transform to React
  1. remark 205
  2. unified 155
  3. markdown 133
  4. plugin 132
  5. html 110
  6. mdast 81
  7. remark-plugin 72
  8. stringify 18
  9. compile 13


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


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!



npm install remark-react


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() {
    this.state = { text: '# hello world' }
    this.onChange = this.onChange.bind(this)
  onChange(e) {
    this.setState({ text: e.target.value })
  render() {
    return (
        <textarea value={this.state.text} onChange={this.onChange} />
        <div id="preview">

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


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.


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


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.


React key (default: h-).


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


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


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


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


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.


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.


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