2.0.0 • Published 7 years ago
react-markdown-code-loader v2.0.0
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
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>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>
<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>
<Hello who={props.who} />