@politico/markdown-react-loader

Webpack loader, loads markdown files as React components

Usage no npm install needed!

<script type="module">
  import politicoMarkdownReactLoader from 'https://cdn.skypack.dev/@politico/markdown-react-loader';
</script>

README

POLITICO

@politico/markdown-react-loader

Loads markdown files for use as React components.

Install

$ yarn add -D @politico/markdown-react-loader react-markdown

Use

Add to your Webpack config.

module.exports = {
  module: {
    loaders: [
      {
        test: /\.md$/,
        loader: '@politico/markdown-react-loader'
      }
    ]
  }
}

Import and use markdown files.

import Text from 'text.md';

const MyComponent = () => (
  <div>
    <Text />
  </div>
);

You can pass any valid props that you would otherwise pass to react-markdown.

<Text linkTarget='_blank' />

The loader also preprocesses the text of your markdown files through mustache.js, so you can also pass a context object to your component and add mustache's templating syntax to make your markdown even more powerful.

This is my **{{ mood }}** markdown file.

<Text context={{ mood: 'AWESOME' }} />

Test

$ yarn start

Development

Make it better, then:

$ npm publish --access public