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

js

module: {

  loaders: [

    {

      test: /\.md$/,

      loader: 'babel!react-markdown-code'

    }

  ]

}







Hello.js

js

import React, { PropTypes } from 'react';



/**

 * HelloWorld

 * @param {Object} props React props

 * @returns {JSX} template

 */

export default function Hello(props) {

  return (

    

      Hello { props.who }

    

  );

}







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(,document.body)





Advance Usage


---

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} />

``

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

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

Hello.js

js
import React, { PropTypes } from 'react';

/**
* HelloWorld
* @param {Object} props React props
* @returns {JSX} template
*/
export default function Hello(props) {
return (

Hello { props.who }

);
}

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(,document.body)

Advance Usage

--- 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} />``