Pre-rehype-react NPM

pre-rehype-react

A rehype plugin to enable render of any React components in markdown.

Installation

npm install pre-rehype-react
# or
yarn add pre-rehype-react

Documentation

The plugin enables you to reference React components within markdown files using square bracket tags like in the example below.

Any properties declared after the component name are passed in as props and any content within the opening and closing tags are passed in as children.

Currently the plugin only accepts property values of type string, number and boolean, but this can be expanded to cover all JSON serializable values.

[callout accent=true marginBottom=5 type="error"]
#### This is a heading
This is a paragraph.
[/callout]

The plugin must be placed between remark-rehype and rehype-react in the remark pipeline like in the example below.

Any components you want to reference within markdown must be declared in the pre-rehype-react components array as well as in the rehype-react components object.

import preRehypeReact from "pre-rehype-react";
import rehypeReact from "rehype-react";
import remark from "remark";
import remarkRehype from "remark-rehype";
import Callout from "./components/Callout";

export default markdown => {
  const { result } = remark()
    .use(remarkRehype)
    .use(preRehypeReact, {
      components: ["callout"],
    })
    .use(rehypeReact, {
      callout: props => <Callout {...props}>,
    })
    .process(markdown);

  return result;
}