md-react-loader
v0.1.6
Published
Webpack loader for markdown loader in React.js
Downloads
15
Maintainers
Readme
This is a markdown file loader
Why this?
This loader will help you directly import a markdown file as a common react component, is that amazing?
Previously when we want to load a markdown file, we may need to do some extra work to load the file, or babel will throw some error while you do these jobs.
How to use?
While using this loader, you need to download it first
npm i md-react-loader
Secondly, write the config of your webpack module rule for md file
{
test: /\.(md)$/,
use: [
{
loader: require.resolve('babel-loader'),
options: {
presets:[
"@babel/preset-env",
"@babel/preset-react"
]
}
},
{
loader: require.resolve('md-react-loader')
}
]
}
if there if a warning: Unknown DOM property class. Did you mean className?
Im sorry for that, you need this lib:
npm install --save-dev babel-plugin-react-html-attrs
and rewrite your babel loader options:
{
presets:[
"@babel/preset-env",
"@babel/preset-react"
],
plugins: [
"react-html-attrs"
]
}
At the end, you just need to import the file directly, then you will get a object like this
{
html: 'your html',
Component: a react component
}
so you can whatever use the Component directly, or render html in your own way, and meantime you can add your own props to this component
import Md from './MyTest.md'
const MyComponent = () => <Md.Component className="my_own_class" />
export default MyComponent
or
import Md from './MyTest.md'
const MyComponent = () => (
<div
dangerouslySetInnerHTML={{ __html: Md.html }}
/>
)
export default MyComponent
Besides, if your markdown file contains some code and you are going to highlight them, you just need to download prismjs on npm and import css file in this library
import Md from './MyTest.md'
import 'prismjs'
import 'md-react-loader/lib/index.css'
const MyComponent = () => <Md.Component className="my_own_class" />
export default MyComponent
now you just did a good job!