2.2.1 • Published 7 years ago
react-markdown-component-loader v2.2.1
React Markdown Component Loader (with Emojis)
This is a fork of react-markdown-loader with a few key differences.
- It renders React components without displaying its source code. The original npm package was used for a React styleguide so it displayed the React component along with its source code. This version just renders the React component because I wanted custom components inside Markdown files.
- The original loader didn't allow for code blocks without a React component. This is fixed so now you specify whether you want the code block to be rendered as JSX or as a code example.
- It supports emojis by using markdown-it-emoji! Because emojis are awesome. Now you can use emojis in your markdown like you normally would on Github:
:clap:
! :clap:
I adapted the original loader for the purpose of creating a React-driven blog using Markdown files as blog posts. This loader allows me to inject interactive React components into my Markdown files. :cake:
How To Use
Install it
npm install react-markdown-component-loader --save-dev
In your markdown file, you must import the components you want to render like so:
---
imports:
HelloWorld: './hello-world.js',
'{ Component1, Component2 }': './components.js'
---
webpack.config.js
module: {
loaders: [
{
test: /\.md$/,
loader: 'babel-loader!react-markdown-component-loader'
}
]
}
hello-world.js
import React, { PropTypes } from 'react';
/**
* HelloWorld
* @param {Object} props React props
* @returns {JSX} template
*/
export default function HelloWorld(props) {
return (
<div className="hello-world">
Hello { props.who }
</div>
);
}
HelloWorld.propTypes = {
who: PropTypes.string
};
HelloWorld.defaultProps = {
who: 'World'
};
In the markdown File simply add the render tag to code fenceblocks you want the loader to compile as Components this will output the rendered component.
hello-world.md