@elboman/remark-jsx

Add support for JSX custom components in remark markdown using a whitelist of Elements. They are parsed along with their props to be rendered later with React or any framework of that sort.

NB: This package is a fork of @dumpster/remark-custom-element-to-hast created in order to enhance JSX parsing to support expressions, converted code to ES6 syntax and updated the test suit with more comprehensive tests.

Getting started

1import unified from 'unified';
2import remark from 'remark-parse';
3import remarkJsx from '@elboman/remark-jsx';
4
5const processor = unified()
6  .use(parseMD)
7  .use(remarkJsx, {
8    componentWhitelist: ['CustomComponent'],
9  });
10
11const output = processor.processSync(
12  `# Hello World
13<CustomComponent withProps={'somestring'} />
14<CustomComponent someExpression={15 + 32} />
15`
16);

The above example will output:

1{
2  "type": "root",
3  "children": [
4    {
5      "type": "element",
6      "tagName": "h1",
7      "properties": {},
8      "children": [
9        {
10          "type": "text",
11          "value": "Hello World"
12        }
13      ]
14    },
15    {
16      "type": "element",
17      "tagName": "CustomComponent",
18      "properties": {
19        "withProps": {
20          "value": "somestring",
21          "type": "string"
22        }
23      },
24      "children": []
25    },
26    {
27      "type": "element",
28      "tagName": "CustomComponent",
29      "properties": {
30        "someExpression": {
31          "value": "15+32",
32          "type": "expression"
33        }
34      },
35      "children": []
36    }
37  ]
38}