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
Component { super thisstate = text: '# hello world' thisonChange = thisonChange } { this } { return <div> <textarea value=thisstatetext onChange=thisonChange /> <div id="preview"> result </div> </div> } ReactDom
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
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.