react-markdown-code-loader

React Markdown

React Markdown Loader with code sources as props

This is a fork of react-markdown-loader and add some features

This loader parses markdown files and converts them to a React Stateless Component. It will also parse FrontMatter to import dependencies and render components along with it’s source code and export code sources

I forkedd this loader in order to make the process of creating styleguides for React components easier with my own project

Install

npm install react-markdown-code-loader  --save-dev

Usage

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

webpack.config.js

module: {
  loaders: [
    {
      test: /\.md$/,
      loader: 'babel!react-markdown-code'
    }
  ]
}

Hello.js

import React, { PropTypes } from 'react';
 
/**
 * HelloWorld
 * @param {Object} props React props
 * @returns {JSX} template
 */
export default function Hello(props) {
  return (
    <div className="hello">
      Hello { props.who }
    </div>
  );
}

Hello.md

---
imports():
  Hello: './Hello.js'
---

# Hello World

This is an example component

```render
<Hello />
```

You can send who to say Hello

```render
<Hello who="World!!!" />
```

app.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import Hello from './Hello.md'

ReactDOM.render(<Hello />,document.body)

Advance Usage

imports(): HelloWorld: './hello-world.js', '{ Component1, Component2 }': './components.js' who : 'world'

<div&gtthis code block with tag "props xx" would not be rendered in the markdown/component,it would be set in the props </div&gt
<div&gtcall this code ,use   "props.code[0]"  </div&gt

<div&gtthis code block with tag "props xx" would not be rendered in the markdown/component,it would be set in the props </div&gt
<div&gtcall this code ,use   "props.code[1]" </div&gt

<Hello who={props.who} /&gt