Package Exports

rehype-react

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rehype-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

rehype-react

rehype-react compiles HAST (HTML Abstract Syntax Tree) to React. Built on remark, an extensively tested and pluggable parser.

Why? Using innerHTML and dangerouslySetInnerHTML in React.js 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 & formatted Markdown content in an application without using dangerouslySetInnerHTML.

Installation

npm:

npm install rehype-react

Programmatic
- remark.use(react, options)
Configuration
Integrations
License

Programmatic

remark.use(react, options)

Parameters

react — This plugin;
options (Object?) — See below.

Let’s say example.js looks as follows:

var React = require('react'),
    rehype = require('rehype'),
    reactRenderer = require('rehype-react');

var App = React.createClass({
    getInitialState() {
        return { text: '<html><body>hello, world</body>,</html>' };
    },
    onChange(e) {
        this.setState({ text: e.target.value });
    },
    render() {
        return (<div>
            <textarea
                value={this.state.text}
                onChange={this.onChange} />
            <div id='preview'>
                {rehype().use(reactRenderer).process(this.state.text).contents}
            </div>
        </div>);
    }
});

React.render(<App />, document.getElementById('app'));

Configuration

All options, including the options object itself, are optional:

sanitize (object or boolean, default: undefined) — Sanitation schema to use. Passed to hast-util-sanitize. The default schema, if none or true is passed, adheres to GitHub’s sanitation rules. If false is passed, it does not sanitize input.
prefix (string, default: h-) — React key.
createElement (Function, default: require('react').createElement) — Function to use to create elements.
rehypeReactComponents (object, default: undefined) — Provides a way to override default elements (<a>, <p>, etc) by defining an object comprised of element: Component key-value pairs. For example, to output <MyLink> components instead of <a>, and <MyParagraph> instead of <p>:
```
rehypeReactComponents: {
  a: MyLink,
  p: MyParagraph
}
```

These can passed to remark.use() as a second argument.

Integrations

rehype-react works great with:

remark-toc, which generates tables of contents;
remark-github, which generates references to GitHub issues, PRs, users, and more;
...and more.

All remark nodes can be compiled to HTML. In addition, remark-react looks for an attributes object on each node it compiles and adds the found properties as HTML attributes on the compiled tag.

rehype-react

Package Exports

Readme

rehype-react

Installation

Table of Contents

Programmatic

remark.use(react, options)

Configuration

Integrations

License