elboman / remark-jsx

@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

import unified from 'unified';
import remark from 'remark-parse';
import remarkJsx from '@elboman/remark-jsx';

const processor = unified()
  .use(parseMD)
  .use(remarkJsx, {
    componentWhitelist: ['CustomComponent'],
  });

const output = processor.processSync(
  `# Hello World
<CustomComponent withProps={'somestring'} />
<CustomComponent someExpression={15 + 32} />
`
);

The above example will output:

{
  "type": "root",
  "children": [
    {
      "type": "element",
      "tagName": "h1",
      "properties": {},
      "children": [
        {
          "type": "text",
          "value": "Hello World"
        }
      ]
    },
    {
      "type": "element",
      "tagName": "CustomComponent",
      "properties": {
        "withProps": {
          "value": "somestring",
          "type": "string"
        }
      },
      "children": []
    },
    {
      "type": "element",
      "tagName": "CustomComponent",
      "properties": {
        "someExpression": {
          "value": "15+32",
          "type": "expression"
        }
      },
      "children": []
    }
  ]
}