Napolean Paced Mischeviously
    Have ideas to improve npm?Join in the discussion! »

    remark-react

    8.0.0 • Public • Published

    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 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 unified@9.0.0, 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

    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.

    Install

    npm i remark-react

    DownloadsWeekly Downloads

    20,614

    Version

    8.0.0

    License

    MIT

    Unpacked Size

    13.1 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar
    • avatar