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
andrehype-react
, and although it does support some customization, it isn’t very pluggable. It’s probably better to useremark-rehype
andrehype-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 fromtofile.contents
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.