README.md

Markdown to React

Webpack loader that parses markdown files and converts them to a React Component.

By extending md syntax, you can easily write react componet in .md files.

Usage

install:

npm i -D md2react-loader

config your webpack and make sure you have installed babel-loader:

module: {
  rules: [
    {
      test: /\.md$/,
      use: [
        'babel-loader',
        {
          loader: 'md2react-loader',
        }
      ],
    },
  ]
}

write your md files:

hello.md

---
imports:
  TestComponent: './testComponent.js'
  '{ Component1, Component2 }': './components.js'
---
# Hello World

This is an example component

```run
<TestComponent />
```

```demo
<HelloWorld who="World!!!" />
```

app.js

import React, { PropTypes } from 'react';

/**
* use md just like a react component
*/
import Hello from 'hello.md'


export default (props) => {
  return (
    <div className="hello-world">
      <Hello />
    </div>
  );
}

Advanced

In the FrontMatter you should import the components you want to render with the component name as a key and it's path as the value。

Markdown syntax extension:

```run
```

• Use the run tag to code fenceblocks you want the loader to compile as Components this will just output the rendered component.

```demo
```

• Use the demo tag to code fenceblocks you want the loader to compile as Components this will output the usual highlighted code and the rendered component.

if you want to custom the output of code, you can just download the repo and change it.

TODO

• loader options:
  • config dependencies
  • config markdown render options

Inspired by react-markdown-loader

License

MIT (c) 2018