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

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

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) 

--- imports(): HelloWorld: './hello-world.js', '{ Component1, Component2 }': './components.js' who : 'world' --- ```source code1 <div>this code block with tag "props xx" would not be rendered in the markdown/component,it would be set in the props </div> <div>call this code ,use "props.code[0]" </div> ``` ```source code2 <div>this code block with tag "props xx" would not be rendered in the markdown/component,it would be set in the props </div> <div>call this code ,use "props.code[1]" </div> ``` ```render <Hello who={props.who} /> ```